Partial Update a list with AJAX

Question

I have a list from the database and I want to implement edit functionality where in onclicking a table column, the column becomes editable and on clicking out of column, the value gets updated.

I have used AJAX for this purpose. My code is as under:

Page1.php

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showEdit(editableObj) 
{
 $(editableObj).css("background","#FFF");
} 
function saveToDB(editableObj,column,id) 
{
 $.ajax(
 {
  url: "page2.php",
  type: "POST",
  data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
  success: function(data)
  {
   $(editableObj).css("background","#FDFDFD");
  }        
 });
}
</script>

The column of my table is as under:

<td contenteditable="true" onBlur="saveToDB(this, 'exmid','<?php echo $p0; ?>')"
         onClick="showEdit(this);"><?php echo $p3 ?>

Note: $p0 contains the serial no of row from mysql database table and $p3 contains the displayed text.

The code for page2.php is:

<?php
include_once 'includes/db_connect.php';
?>
<?php
$result = mysql_query("UPDATE examlist1 set " . $_POST["column"] . " =     '".$_POST["editval"]."' WHERE  sno=".$_POST["id"]);
?>

Problem: When I click on the column it becomes editable. Using alert() inside saveToDB() I have checked that the function is called on clicking out of the column and also values of column and id are correct.

Then I tried the alert() function inside $.ajax and it was not called. I am not sure whether ajax is running or not. This is the first time I am trying to use ajax in a php code myself.

Please suggest what is the problem and what is the solution? The code is being implemented on a Linux based server hosted at Godaddy using PHP 5.4.

Also I would like to set the background color on fail. How to write it inside ajax block?

Answer 1

If you are getting the correct values when alerting.In your page2.php. Use mysqli instead of mysql and also use $connection object in mysqli_query() .

    <?php
include_once 'includes/db_connect.php';
$column=$_POST["column"];
$editval=$_POST["editval"];
$id=$_POST["id"];
$result = mysqli_query($connection,"UPDATE examlist1 SET $column='$editval' WHERE sno=$id");//$connection is database connection variable
if ($result)
 {
    echo json_encode(array('success'=>true));
}
else
{
    echo json_encode(array('success'=>false));
}
?>

Here is Javascript: Try 100% works (Define what you want on if/else statement)

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showEdit(editableObj) 
{
 $(editableObj).css("background","#FFF");
} 
function saveToDB(editableObj,column,id) 
{
 $.ajax(
 {
  url: "page2.php",
  type: "POST",
  data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
  success: function(data)
  {
    var res=eval(data);
    //if success then
    if (res.success) 
    {
        //write JS code that you want after successful updation

     $(editableObj).css("background","#FDFDFD"); //<- according to problem
    }
    //if fails then
    else
    {
        //write JS code that you want after unsuccess
    }
  }        
 });
}
</script>