Success callback of x-editable is not working

Question

I have been able to successfully implement x-editable to create new user and subsequently post changes to the DB. Everything is working fine in this regard.

I wanted to use the numeric entry of a field and do some arithmetic operations on it and display the result in a different div.

I created this fiddle: http://jsfiddle.net/Mdcfh/

which displays my setup. This fiddle works fine, but when I implement exactly the same in my code, nothing happens in the call back.

I am appending the relevant portions of my code below:

HTML

<div id="msg_units" style="display:none">Saved!</div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="text-left hide800"><strong>Name</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<tr>                         
<td class="text-left hide800"><?php echo $_REQUEST['title']?></td>
<td class="text-center"><i class="fa fa-inr"></i><strong><span class="price"     id="unit_cost"><?php echo $_REQUEST['cost']?></span></strong></td>
<td class="text-center"><a href="#" class="myeditable qty" id="num_units" data-type="text" data-pk="3" data-name="num_units" data-title="How many are going?"></a></td>
<td class="text-right"><i class="fa fa-inr"></i><strong><a href="#" id="exp_total"></a>        </strong></td>
</tr></tbody></table>

JS

//editables 
$('#num_units').editable({
 url: 'post.php',
 ajaxOptions: { dataType: 'json' },
display: function(value, response) {
return false;   //disable this method
},
success: function(response, newValue) {
      var current_pk = $(this).data('pk');
      $('#exp_total').html(3*7200);
        $('#msg_units').text(current_pk).show();
        if (response && response.units) {
        $('#msg_units').text(response.units*5).show();
    }   
}
});

POST.PHP

$result = mysql_query('update mytable set '.mysql_escape_string($name).'="'.mysql_escape_string($value).'" where id = "'.mysql_escape_string($pk).'"');

  $yes[] = array(
    'success' => 'true',
    'msg' => 'update success for',
    'value' => $value
    );

  if ($result != false) {
    // echo json_encode($yes);
    echo '{"units": "3"}';
    // echo '{"success": "true"}';
  } else {
    $no[] = array(
      'success' => 'false',
      'msg' => 'update failed for' .mysql_escape_string($name),
      'value' => $value
      );
    echo json_encode($no);
  }

The post.php code is working, all my editables are updating successfully. But I have not been able to make the success callback work at all. None of the statements written in the success callback work (they work in the browser console though).

Here's another fiddle which uses the real code. The fiddle: http://jsfiddle.net/8meZ8/1/

I am fairly new to this, I am sure there is some obvious omission. Any help will be greatly appreciated! Thanks in advance!!

UPDATE for @brutallord

I use this in my post.php for generating response:

  $yes[] = array(
    'success' => 'true',
    'msg' => 'update success for',
    'value' => $value
    );

  if ($result != false) {
    echo json_encode($yes);
    //echo '{"units": 3}';
    // echo '{"success": "true"}';
  } else {
    $no[] = array(
      'success' => 'false',
      'msg' => 'update failed for' .mysql_escape_string($name),
      'value' => $value
      );
    echo json_encode($no);
  }

I will like to highlight that, submitting a new user works fine. In which case, I am posting to a different file newuser.php which sends a response as given below:

if ($result != false) {
     echo '{"id": '. mysql_insert_id() .'}';
} else {
     echo "Error:" . $maxid . $_POST['buyer_email'] . $_POST['buyer_contact_no'] . $_POST['buyer_full_name'];
}

The success callback function for newuser works like a charm with the above response.

Answer 1

I figured out the solution:

It was a plain error of Javascript code flow. Editables seems to be particularly finicky about it. Moved the code blocks (editable declarations) in proper sequence (in the expected sequence of their run) and everything started working like a charm.

A particular case needs highlighting - If editable is initiated earlier in the code like so,

$(selector).editable({
url: 'post.php',
})

Make sure that the validation/success/error code is just below it, to avoid code flow issues like I faced. Ideally would suggest, skipping separate initialization. Just declare globals in the beginning and then use editables below.

Thanks everyone for responding.