how to get out of jquery (jeditable) mess

Question

I am not very good at jQuery but decided to use jEditable plugin for my site because I thought it looked good and solved the purpose. However, I am in a bit of a tangle now.

I used this plugin to edit data and the edited data is sent to the DB and some fields are updated by it. the Stored procedure that updates these fields is returning some data back. I would like to have this data returned back to me. I would just like to see the returned data in an 'alert' statement first, then I can take it from there.

The callback method of this plugin just has value, and settings.

Is there any way to get some data back from the server-side while using this plugin?

Cowpoke

Answer 1

I have done exactly this for my site. This should get you started.

$("#editable_text").editable(submitEdit, { 
            indicator : "Saving...",
            tooltip   : "Click to edit...",
            name : "Editable.FieldName",
            id   : "elementid",
            type : "text",
});
function submitEdit(value, settings)
{ 
   var edits = new Object();
   var origvalue = this.revert;
   var textbox = this;
   var result = value;
   edits[settings.name] = [value];
   var returned = $.ajax({
           url: "http://URLTOPOSTTO", 
           type: "POST",
           data : edits,
           dataType : "json",
           complete : function (xhr, textStatus) 
           {
               var response =  $.secureEvalJSON(xhr.responseText);
               if (response.Message != "") 
               {
                   alert(Message);
               } 
           }
           });
   return(result);
 }

You need to return a Json response of the form

{ "Message" = "FOO" }

And that will be displayed in the alert.

Dockhand

+1 Is it possible to bind the submit button to self-created button? – Bitter

Minor nitpick, but this Json response isn't quite Json ... s/=/:/ :-) – Coelho

Answer 2

I've been working in classic ASP trying to solve this problem too, and figured others like me may end up here too. Here's how I've solved this issue in classic ASP:

Failed server validation... response from whatever.asp

<%
response.status "406 Not Acceptable"
response.write "error message here"
response.end
%>

Whatever error message whatever.asp sent can be accessed through onerror:, and the field will be reset to the original value.

$("#editable_text").editable("whatever.asp", { 
    indicator : "Saving...",
    tooltip   : "Click to edit...",
    type : "text",
    onerror: function (settings, original, xhr) {
        original.reset();
        //do whatever you want with the error msg here
        alert(xhr.responseText);
    }     
});

(and if the value passes server validation, just response.write whatever the updated value is)

Ascend

+1 for mentioning onerror, which works, but doesn't seem to be documented. However, I think a 403 would be more appropriate than a 406, since the 406 is specifically about the Accepts header. – Performing

Answer 3

Is the URL you are submitting the updates to (which will be some sort of dynamic page such as PHP, JSP, a Java servlet, etc) adding the return value from the stored procedure to the response? If so, I'd expect that data to show up in the "value" field that they pass to the callback.

When I use the jEditable online demo, the response just includes the updated text, but that's a function of the particular PHP code they're using and doesn't have anything to do with the jEditable javascript code.

Giantism

Answer 4

chinese user can see this blog : http://wxianfeng.com/2009/10/14/rails-in-place-edit-with-jquery

Arrearage

also can non Chinese users who speak Chinese ;) – Blennioid

Answer 5

Seems like jEditable is a wrapper around jquery ajax methods. It should not be too difficult to replace all your jEditable calls with calls that use jquery's native ajax method.

You can replace jEditable's callback named 'callback' with 'success' which is the callback's name in jquery's ajax function.

Oxford

Answer 6

The documentation says the first parameter of the 'callback' function is "value":

'callback': function (value, settings) {
...

What the documentation does not say is that the "value" here is whatever the server writes out. It is not limited to the raw value. I send back a JSON-encoded structure, so the first line of my callback function is this:

var updateInfo = JSON.parse(value);

And then I pull fields as needed from the updateInfo structure.

Cabdriver