Im not sure if this is the correct section to put this in but the problem seems to be on the php-mysql side (i think).
I am trying to understand the "ajax / prototype framework" edit-in place method by following the example at
http://24ways.org/2005/edit-in-place-with-ajax however im attempting to modify it to update database info instead of just static text that the example in that link shows.
heres the main page code edit-in-place.php
Code:
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpsw = "";
$db_db = "test";
mysql_connect($dbhost,$dbuser,$dbpsw) or die(mysql_error());
mysql_select_db($db_db) or die(mysql_error());
$sql = "SELECT * FROM sometable WHERE id = 1 LIMIT 1";
$result = mysql_query($sql) or die("Unable to process query");
$row = mysql_fetch_assoc($result);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="js/prototype.js"></script>
<script type="text/javascript" language="javascript" src="editinplace.js"></script>
<style type="text/css">
<!--
.editable{
color: #000;
background: #FFFFCC;
}
body {
font: small Tahoma, Verdana, Arial, sans-serif;
}
-->
</style>
</head>
<body>
<h1>Edit in place</h1>
<p id="about"><?php echo nl2br($row['about']); ?></p>
</body>
</html>
editinplace.js
Code:
Event.observe(window, 'load', init, false);
function init(){
makeEditable('about');
}
function makeEditable(id){
Event.observe(id, 'click', function(){edit($(id))}, false);
Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}
function edit(obj){
Element.hide(obj);
var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="4" cols="60">'+obj.innerHTML+'</textarea>';
var button = '<div><input id="'+obj.id+'_save" type="button" name="submit" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></div></div>';
new Insertion.After(obj, textarea+button);
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
document.getElementById(obj.id+'_edit').focus();
}
function showAsEditable(obj, clear){
if (!clear){
Element.addClassName(obj, 'editable');
}else{
Element.removeClassName(obj, 'editable');
}
}
function saveChanges(obj){
var new_content = escape($F(obj.id+'_edit'));
obj.innerHTML = "<img src=\"img/ajax-loader.gif\" alt=\" \" />";
cleanUp(obj, true);
var success = function(t){editComplete(t, obj);}
var failure = function(t){editFailed(t, obj);}
var url = 'edit.php';
var pars = 'id='+obj.id+'&about='+new_content;
var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});
}
function cleanUp(obj, keepEditable){
Element.remove(obj.id+'_editor');
Element.show(obj);
if (!keepEditable) showAsEditable(obj, true);
}
function editComplete(t, obj){
obj.innerHTML = t.responseText;
showAsEditable(obj, true);
}
function editFailed(t, obj){
obj.innerHTML = 'Sorry, the update failed.';
cleanUp(obj);
}
and edit.php
PHP Code:
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpsw = "";
$db_db = "test";
mysql_connect($dbhost,$dbuser,$dbpsw) or die(mysql_error());
mysql_select_db($db_db) or die(mysql_error());
$id = $_POST['id'];
$content = $_POST['about'];
if(isset($_POST['submit'])) {
$sql = "UPDATE sometable SET about = '$content' WHERE id = '$id' LIMIT 1";
$result = mysql_query($sql) or die("Unable to process query");
}
echo nl2br(htmlspecialchars($content));
?>
The content updates on the page however when i refresh the browser it goes back to what it used to be, as the update has never happened.
What am i missing?
Before you post, read our: 
