select onblur firing ajax but not updating database

Question

I have a select dropdown that when it is changed I want to update a value in the database. Ajax is firing as I get the gif pop up and there are no errors in the console but the database does not get updated. All other fields (eg the startdate in the example below) work fine so the Ajax call is right I think. I've tried using both onBlur and onChange as my event handlers for the select.

<td <form><select onblur="saveToDatabase(this,'workingpatternid', 'employmenthistory', 'employmenthistoryid','<?php echo $employmenthistory[$k3]["employmenthistoryid"]; ?>')"><option value="<?php echo $employmenthistory[$k3]["workingpattternid"]; ?>"><?php echo $employmenthistory[$k3]["text"]; ?></option><?php
          if(isset($workingpatterns) && !empty($workingpatterns)){
          foreach($workingpatterns as $k4=>$v4) {
          ?> <option value="<?php echo $workingpatterns[$k4]["workingpatternid"]; ?>"><?php echo $workingpatterns[$k4]["text"]; ?></option><?php }}?></select></form></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'startdate', 'employmenthistory', 'employmenthistoryid','<?php echo $employmenthistory[$k3]["employmenthistoryid"]; ?>')" onClick="showEdit(this);"><?php echo $employmenthistory[$k3]["startdate"]; ?></td>

Savetodatabase function:

<script type="text/javascript" name = "editable fields">
        function showEdit(editableObj) {
            $(editableObj).css("background","#FFF");
        } 

        function saveToDatabase(editableObj,column,table,primary,id) {
            $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
            $.ajax({
                url: "saveedit.php",
                type: "POST",
                data:'column='+column+'&editval='+editableObj.innerHTML+'&table='+table+'&primary='+primary+'&id='+id,
                success: function(data){
                    $(editableObj).css("background","#FDFDFD");
                }        
            });
        }
    </script>

saveedit.php

<?php
require_once("connect_db.php");
$table=$_POST['table'];
$column=$_POST['column'];
$value=$_POST['editval'];
$primary=$_POST['primary'];
$id=$_POST['id'];
$sql = "UPDATE `$table` SET `$column` = '$value' WHERE `$primary`='$id'";
$result = mysqli_query ($dbc, $sql) or die(mysqli_error ($dbc));
?> 

Answer 1

Debugging the request being sent:

Client side

If you press F12 while on your calling page, go to the network console (I am asuming that you are using a newer browser like Chrome 40+ or IE 9+) and make sure that the cache is being saved (ie not refreshed on page refresh).

Update the page, clear the list, and then trigger your code again. Note whether the request is sent as you expect (click on the line representing the call to saveedit.php and then request)

Server side

You could add a call to error_log(var_export($_POST)) to see if you received what you expect. Results will be in your webservers error.log, thereby this does not expose data to users, if accidentally left in after deployment.

Also verify that the page is being called, by tailing access.log on your server.

Getting the expected value via javascript:

The trouble is that the first call is in a select; the code could be editableObj.options[editableObj.selectedIndex].value but the second is in a div element. Either you should reconsider your page design, or make two different functions (not recommended)