View Full Version : Problem with PHP side of ajax's edit in place method

03-08-2007, 05:07 PM
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

$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">
<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">
color: #000;
background: #FFFFCC;
body {
font: small Tahoma, Verdana, Arial, sans-serif;

<h1>Edit in place</h1>
<p id="about"><?php echo nl2br($row['about']); ?></p>


Event.observe(window, 'load', init, false);

function init(){

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){
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);

function showAsEditable(obj, clear){
if (!clear){
Element.addClassName(obj, 'editable');
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){
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.';

and edit.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. :confused: What am i missing? :o

03-08-2007, 06:22 PM
<p id="about"><?php echo nl2br($row['about']); ?></p>

should be the actual id from the database table...here ur updating a row with id='about' but fetching from a row where id='1'

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum