JEditable, how to handle a JSON response?

Question

Right now, the server response I'm working with sends back a JSON response like this:

{"status":1}

After saving, jeditable places the actual response: {"status":1} on the page. Anyway to get around this issue?

Answer 1

A better solution is to post-process the returned json data before it hits the page.

Suppose your server returns the following json string:

{ "status": 1, "result": "value to be displayed", "other": "some other data" }

and you would like to process the "status" and "other" fields, and display the "result" field in the jeditable input field.

Add the following 2 lines to jquery.jeditable.js:

(around line 95):

var intercept = settings.intercept || function(s) {return s; };

(around line 350, right after " success : function(result, status) {"

result = intercept.apply(self,[result]);

Then, in your own code, do something like the following:

$(some_field).editable(
 '/some_url_on_your_server',
 {
     indicator : "<img src='/images/spinner.gif'>",
     tooltip: "Click to edit.",
     indicator: "Saving...",
     onblur: "submit",
     intercept: function (jsondata) {
         obj = jQuery.parseJSON(jsondata);
         // do something with obj.status and obj.other
         return(obj.result);
     },
     etc.

This allows you do cool stuff like having your server convert abbreviations to full strings etc.

Enjoy!