Inline editing using Ajax in Jquery

Question

Could someone please suggest where I might be going wrong with the following code? I am attempting to make some fields on a html table editable using Ajax and Jquery. The edit is working on the front-end but when I refresh the page the edits disappear as they are not getting written to the database. My code so far goes:

index.php -- I am attempting to make the name field editable

echo "<table cellpadding='0' cellspacing='0' border='0' class='table table-striped' id='datatable'>
        <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>City</th>
            <th>County</th>
            <th>Phone</th>
            <th>Mobile</th>
            <th>Admin</th>
        </tr>
        </thead><tbody>";
        while( $row = $sth->fetchObject() ){
            echo '<tr>
                <td class="edit name '.$row->customer_id.'">'.$row->name.'</td>
                <td>'.$row->address_line_1.',<br />'.$row->address_line_2.',<br />'.$row->address_line_3.'</td>
                <td>'.$row->city.'</td>
                <td>'.$row->county.'</td>
                <td>'.$row->phone.'</td>
                <td>'.$row->mobile.'</td>
                <td><div class="btn-group">
                <a class="btn btn-primary" href="#">Admin</a>
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span>
                </a><ul class="dropdown-menu">
                <li><a href="mailto:'.$row->email.'"><i class="icon-envelope"></i>Email</a></li><li><a href="#"><i class="icon-pencil"></i>Edit</a></li><li><a id="'.$row->customer_id.'" class="delete"/><i class="icon-trash"></i>Delete</a></li>
                </td></tr>';
                    }
            echo "</tbody></table>";

Jquery

<script>
            $(document).ready(function(){                           
                $('td.edit').click(function(){
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');

                    $(this).addClass('ajax');
                    $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">');

                    $('#editbox').focus();

                }
            );
                $('td.edit').keydown(function(event){
                    arr = $(this).attr('class').split( " " );
                        if(event.which == 13)
                            { 
                            $.ajax({    type: "POST",
                                        url:"includes/edit-customer.php",
                                        data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],
                                        success: function(data){
                                             $('.ajax').html($('.ajax input').val());
                                             $('.ajax').removeClass('ajax');
                                        }});
                        }

                    }
                );
                    $('#editbox').live('blur',function(){
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                });
            });
    </script>

edit-customer.php

<?php

    //MySQL Database Connect
    require 'config.php';

    if(isset($_POST['rownum']))  
    {  
        update_data($_POST['field'],$_POST['value'],$_POST['rownum']);  
    }  

    print_r($_POST);

    function get_data()  
    {  
        $query = $dbh->prepare("SELECT * FROM customer");
        $query->execute();
        return $query;
    }  

    function update_data($field, $data, $rownum)  
    {  
        $query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum;);
        $query->execute();      
    }   
?>

The columns in the customer table of my database are customer_id, name, address_line_1, address_line_2, address_line_3, city, county, phone, mobile, email

Answer 1

I think you need to simplify the problem. First, it seems that the data is not being saved on the server side. You don't check if there is an error during executing your query. Modify it like so to find the error/eliminate an error vector:

$result = $query->execute();     
// execute() can fail for various reasons.
if ( false===$result ) {
  die('execute() failed: ' . htmlspecialchars($query->error));
}'

And modify success to see any error messages returned:

success: function(data){

alert(data);
}});

If this is empty, then we can rule out an error in your query.

Answer 2

There is a semi-colon in your UPDATE statement:

$query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum;);

Should be

$query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum);

Another issue is that your rownumber and field in arr[] could easily get mixed up since you are just splitting and assuming one came first.