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.

Utimer

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.

Utimer

Can you actually type out the full solution code in your codeblock here? I don't understand precisely what it is you mean when you refer to placing the success code "just below it". – Cero

I actually just fixed the problem for my case. the success callback had not been firing, but once I nested the function definition inside the ajaxOptions parameter, then it fired. – Cero

Answer 2

Seems to be so, that success callback uses answer from server as JSON, but may be you have not send that:

header('Content-type:application/json')

?

Alberto

I am sending response from post.php as json_encode($arr). Further, I tried specifying ajaxoptions in the function like so: ajaxOptions: { dataType: 'json', contentType: 'Content-type:application/json' } as per instructions at: vitalets.github.io/x-editable/docs.html But to no avail. – Utimer

yes, i understood that. but you may need to set additional response header at php. that makes response to be interpreted as JSON string, not like a plain text. <br/> Anyway, would be good if you show what arguments are passed to success callback and show ajax query details at network panel – Alberto

I see. I updated my question with code relevant to your comment - @Alberto – Utimer

ok. it would be helpful if you show what arguments are passed to success callback, or isn't it working at all? and network query headers would be although very helpful – Alberto

As given in the code above, I am passing success, msg and value as a json to the callback. I tried various other combinations too. And I have made it work with even simple echo '{"id": '. mysql_insert_id() .'}'; as well. But the success callback here refuses to work. I am not sure what you mean by network query header. Sorry. Could you elaborate on how I may find it? – Utimer

open developer tools of your browser at network tab. clear all there before sending query and send that. you'll see your query there. after clicking on it you'll see your request and response headers – Alberto

Thanks. Attaching the screenshots: new user query in this screenshot [link](<img src="evernote.com/shard/s90/sh/be7b7bdb-e4d1-4064-8eb1-b347e5b0e696/…" alt="POS" />) subsequent num_unit query in this [link](<img src="evernote.com/shard/s90/sh/002f6ac9-5234-4da8-a9ae-841ee849b38f/…" alt="POS%20and%20newuser.php%20%E2%80%94%20beta" />) – Utimer

Ok, both requests have mime text/html. Than callback should be called. Haven't you tried to debug it in console? – Alberto

Yes, I tried using console. The statements are working fine in console. But the success callback or display callback are not reacting at all. Deadlock on this. – Utimer

and what about using console.log on the first line of callback with it's arguments passed to console.log? That way you at least would know that arguments are fetched correctly – Alberto

the thing is, success callback is not reachable only. Tried console.log as well – Utimer

so the only way left is debugging deep to XMLHttpRequest that way to find where problem is – Alberto

Answer 3

<?php
$yes = array('success' => true,'msg'=>'Done');
$no = array('success' => false,'msg'=>'no');

header('Content-type:application/json');
echo json_encode($yes);

And js code

$('tr #name,tr #job').editable({
    type:'text',
    ajaxOptions: { dataType: 'json' },
    url: 'editable-request/update-trainee.php',
    display: function(value, response) {
    return false;   //disable this method
  },
    success: function(response, newValue) {
if(!response.success) {
  return response.msg;
}else{
  alert(response.msg);
 } });

That is working for me

Rogovy

You seem to have forgotten the last closing brackets. Format your JS to see what's wrong - jsbeautifier.org – Only