Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts

    Problem with PHP side of ajax's edit in place method

    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?
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Code:
    <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'


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •