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

Question

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!

Answer 1

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.