Why is my jQuery jEditable, edit-in-place callback not working?

I am using a jQuery jEditable edit-in-place field but when the JSON function returns and I 开发者_开发百科try to return a value from my edit-in-place callback all I get is a flash of

You can see this here...

http://clareshilland.unknowndomain.co.uk/

Hit Ctrl+L to login...

Username: stackoverflow

Password: jquery

Although you can see the script in /script.js here is the main code exerpt...

$('#menu li a').editable(edit_menu_item, { cssclass: 'editable' });

Here is the callback:

function edit_menu_item(value, settings) {

 $.ajax({
  type : "POST",
  cache : false,
  url  : 'ajax/menu/edit-category.php',
  dataType: 'json',
  data : { 'id': this.id, 'value': value },
  success : function(data) {

   if (data.status == 'ok') {
    alert('ok');
    return data.title;
   } else {
    alert('n/ok');
    return this.revert;   
   }

 }});

}

The JSON code is here: ajax/menu.edit-category.php

The edit-in-place is is on the menu which also has a jQuery sortable on it. Single click to edit. Enter to save, and it stores the data but does not update it on the edit-in-place field.

Please help stackoverflow, I have been working on this for a mega age.

Thanks in advance!

From the editable homepage (http://www.appelsiini.net/projects/jeditable):

Note that function must return string. Usually the edited content. This will be displayed on page after editing is done.

edit_menu_item doesn't return a string - it would seem that you can get around that by returning value, then if you need to update the actual contents, do so in the success callback of your ajax request. You might want to also add an error callback, just in case.

An alternative, which is probably a bad idea, would be to mark your ajax call as synchronous (async : false) and looking at the responseText, but that would lock up the page until your request completes.

Pass the json object from server side, which will be treated as text by Javascript. You have to parse that to json object using var myObject = JSON.parse(myJSONtext);

PHP Code

$response = new stdClass();
$response->value = $value;
print_r(json_encode($response));

Js Code

//(in Jeditable callback)
"callback": function( sValue, y ) {
    sValue = JSON.parse(sValue);
    //now you can access sValue.value
}

I had the same problem and therefor I modified the Jeditable source code by introducing a callback so that I can return the string value from inside the AJAX "succes" handler.

Source Jeditable before:

/* check if given target is function */
if ($.isFunction(settings.target)) {
  var str = settings.target.apply(self, [input.val(), settings]);
  $(self).html(str);
  self.editing = false;
} else {

Source Jeditable after:

/* check if given target is function */
if ($.isFunction(settings.target)) {
        var edit = self;
        settings.target.apply(self, [input.val(), settings, function(str){
            $(edit).html(str);
            edit.editing = false;
        }
    ]);
} else {

In your succes handler: