Below you will find a link to my contenteditable DIV page, appropriately titled ce.php:
http://stateofdebate.com/ce.php
My desire from this question is to find an answer to how I can use Comet/reverse AJAX to immediately update the text on the page for all users when the text is changed. CURRENTLY, it is saved to my mySQL database, and the text is only updated when other users refresh the page.
Please do not give vague answers like "use WebSocket" or "use node.js". I have asked a question already similar to this and gotten those kind of answers. To get a vote or check from me, I need either complete answers or links to tutorials.
I feel like this, although a specific question with specific code, could help a lot of people with similar questions, if answered throughly and correctly.
Here is my complete code:
CE.PHP
<!doctype html>
<head>
<meta charset="utf-8">
<title>Gazpo.com - HTML5 Inline text editing and saving </title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet'
type='text/css'>
<style>
body {
font-family: Helvetica,Arial,sans-serif;
color:#333333;
font-size:13px;
}
h1{
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 28px;
}
a{
color: #0071D8;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
:focus {
outline: 0;
}
#wrap{
width: 500px;
margin:0 auto;
overflow:auto;
}
#content{
background: #f7f7f7;
border-radius: 10px;
}
#editable {
padding: 10px;
}
#status{
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}
.success{
background: #B6D96C;
}
.error{
background: #ffc5cf;
}
#footer{
margin-top:15px;
text-align: center;
}
#save{
display: none;
margin: 5px 10px 10px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
font-weight:700;
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed');
}
#save:hover
{
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#dcdcdc');
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#save").click(function (e) {
var content = $('#editable').html();
$.ajax({
url: 'save.php',
type: 'POST',
data: {
content: content
},
success:function (data) {
if (data == '1')
{
$("#status")
.addClass("success")
.html("Data saved successfully")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
else
{
$("#status")
.addClass("error")
.html("An error occured, the data could not be saved")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
}
});
});
$("#editable").click(function (e) {
$("#save").show();
e.stopPropagation();
});
$(document).click(function() {
$("#save").hide();
});
});
</script>
</head>
<body>
<div id="wrap">
<h1><a href="http://gazpo.com/2011/09/contenteditable/" > HTML5 Inline text editing and
saving </a></h1>
<h4>The demo to edit the data with html5 <i>contentEditable</i>, and saving the changes
to database with PHP and jQuery.</h4>
<div id="status"></div>
<div id="content">
<div id="editable" contentEditable="true">
<?php
//get data from database.
include("db.php");
$sql = mysql_query("select text from content where element_id='1'");
$row = mysql_fetch_array($sql);
echo $row['text'];
?>
</div>
<button id="save">Save</button>
</div>
<div id="footer">
<a href="http://gazpo.com/">Tutorial by gazpo.com</a>
</div>
</div>
</body>
</html>
SAVE.PHP
<?php
include("db.php");
$content = $_POST['content']; //get posted data
$content = mysql_real_escape_string($content); //escape string
$sql = "UPDATE content SET text = '$content' WHERE element_id = '1' ";
if (mysql_query($sql))
{
echo 1;
}
?>
DB.PHP
<?php
//database connection
mysql_connect("test.test00.com:2400", "first_testuser", "pw") or die(mysql_error());
mysql_select_db("jorgea_testdb") or die(mysql_error());
?>
EDIT: still looking for an answer! EDIT: deleting old question and creating new one in attempt to find someone who can answer this....
I refresh simply from the database using onBlur in the DIV. I needed it, as I have the background colour changing depending on the content of the field.