X-editable not updating value in database

Question

I am using X-Editable plugin in my php application to update fields of my table and use POST file to update the database.

Here is form code:

<table id="restaurant" class="table table-bordered table-striped">
       <tbody>
       <?php 
       echo '
            <tr>
               <td style="width:15%">Restaurant name</td>
               <td style="width:50%"><a href="#" id="name" data-type="text" data-pk="'. escape($arrValues[$i]->r_id) .'" data-name="name" data-placeholder="Required" data-original-title="Enter Restaurant Name" class="editable editable-click" style="display: inline;">'. escape($arrValues[$i]->name) .'</a></td>
               <td style="width:35%"><span class="text-muted">Enter restaurant name.</span></td>
            </tr>';
        ?>
        </tbody>
    </table>

Here is the X-editable JS I am using at the bottom of the page:

<script>
jQuery(document).ready(function() {

//initializes all global values and plugin essentials
    FormEditable.init(); 

//below function is only initialized on one field for debug purposes
    $(function(){
        $('#name').editable({
            url: 'post.php'
        });
    });
});
</script>

Here is the contents of my Post.php file:

<?php 
require 'core/init.php';

    $pk = $_POST['pk']; //primary key aka ID
    $name = $_POST['name']; //name of the field
    $value = $_POST['value']; //value of the field

    if (!empty($value)){
        $result = mysql_query('update Restaurants set '.mysql_escape_string($name).'="'.mysql_escape_string($value).'" where r_id = "'.mysql_escape_string($pk).'"');
        print_r($_POST);
    } else {
        header('HTTP 400 Bad Request', true, 400);
        echo "This field is required!";
    }

?>

When I update the field in the application the value gets changed in the DOM but the value is not updated in the database. This my first time using X-Editable plugin and I not very strong in JS AJAX calls. Could someone please let me know how I can debug this and figure out why my value is not being pushed to the database.

Any help will be greatly appreciated.

Answer 1

To properly debug this you might use your Browsers Console! Especially the "network" tab is a great help in debugging this.

You included the scripts successfully, used the correct markup, so that the DOM gets changed. Now the next step in debugging is, to ensure that the ajax request (pushing the data) to your post.php is made.

To send something you need to set ajaxOptions put, like this:

 $('#name').editable({
   type: 'text',
   url: 'post.php',
   ajaxOptions: {
     type: 'put'
   }   
 });

You debug the Ajax request by checking the "network" tab of your console. Open the network console before you edit the field. Then edit it and watch the new request appearing in the console. By clickling the log entry in the console, you see the data send from the browser to your script.

In your post.php you might add a var_dump($_POST); to see all the parameters incoming.

Answer 2

Just change from

ajaxOptions: {
     type: 'put'
   }  

into

ajaxOptions: {
     type: 'POST'
   }   

and get your PHP ready for update mysql as usual.

Answer 3

The issue was caused by the mockjax plugin which was overwriting the ajax function with a different url. The issue was resolved when I removed all of the mockjax references from the page.

Thank you Jens-Andre Koch for your help!