6

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.

3 Answers 3

3

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.

2
  • 1
    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". Jan 19, 2018 at 3:28
  • 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. Jan 19, 2018 at 3:36
1

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')

?

12
  • 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.
    – rednivlat
    Mar 23, 2014 at 12:48
  • 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
    – brutallord
    Mar 23, 2014 at 13:01
  • I see. I updated my question with code relevant to your comment - @brutallord
    – rednivlat
    Mar 23, 2014 at 13:22
  • 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
    – brutallord
    Mar 23, 2014 at 13:35
  • 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?
    – rednivlat
    Mar 23, 2014 at 13:49
0
<?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

1
  • You seem to have forgotten the last closing brackets. Format your JS to see what's wrong - jsbeautifier.org
    – Al.G.
    Oct 4, 2016 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.