how to reverse AJAX on HTML contenteditable DIV going to mySQL DB with PHP -
below find link contenteditable div page, appropriately titled ce.php:
http://stateofdebate.com/ce.php
my desire question find answer how can use comet/reverse ajax update text on page users when text changed. currently, saved mysql database, , text updated when other users refresh page.
please not give vague answers "use websocket" or "use node.js". have asked question similar , gotten kind of answers. vote or check me, need either complete answers or links tutorials.
i feel this, although specific question specific code, lot of people similar questions, if answered throughly , correctly.
here complete code:
ce.php
<!doctype html> <head> <meta charset="utf-8"> <title>gazpo.com - html5 inline text editing , 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, data not 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 , saving </a></h1> <h4>the demo edit data html5 <i>contenteditable</i>, , saving changes database php , jquery.</h4> <div id="status"></div> <div id="content"> <div id="editable" contenteditable="true"> <?php //get data database. include("db.php"); $sql = mysql_query("select text content 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 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' 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 answer! edit: deleting old question , creating new 1 in attempt find can answer this....
Comments
Post a Comment