JEditable, wie wird mit einer JSON-Antwort umgegangen?

Question

Gerade jetzt, die Antwort des Servers mit arbeite ich sendet eine JSON-Antwort wie folgt zurück:

{"status":1} 

Nach dem Speichern Jeditable Orte, um die tatsächliche Antwort: {"status":1} auf der Seite. Wie auch immer, um dieses Problem zu umgehen?

Answer 1

So ist die Lösung, die ich mit zu ähnlich kam, was answered here.

var editableTextArea = $('.editable-textarea'); 
     editableTextArea.editable(submitEditableTextArea, { 
    type  : 'textarea', 
    cancel : 'Cancel', 
    submit : 'Save', 
      name   : editableTextArea.attr('id'), 
      method  : 'post', 
      data   : function(value, settings) { 
             return $.fn.stripHTMLforAJAX(value); 
            }, 
      event  : "dblclick", 

    onsubmit : function(value, settings) { 
       //jquery bug: on callback reset display from block to inline 
       $('.btn-edit').show(0, function(){$(this).css('display','inline');}); 
       }, 
    onreset  : function(value, settings) { 
       //jquery bug: on callback reset display from block to inline 
       $('.btn-edit').show(0, function(){$(this).css('display','inline');}); 
       } 
    }); 

madcapnmckay Dann

function submitEditableTextArea(value, settings) { 
         var edits = new Object(); 
         var result = $.fn.addHTMLfromAJAX(value); 
         edits[settings.name] = [value]; 
         var returned = $.ajax({ 
          type   : "POST", 
          data   : edits, 
          dataType : "json", 
          success  : function(_data) { 
           var json = eval(_data); 
           if (json.status == 1) { 
            console.log('success'); 
           } 
          } 
         }); 
         return(result); 
        } 

Answer 2

Eine bessere Lösung, bevor es die URL-Funktion ist die zurück json Daten nachbearbeiten ist geht auf die Seite.

Ihren Server Angenommen gibt die folgende json string:

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

und Sie mögen den „Status“ verarbeiten und „andere“ Felder, und zeigen Sie das Feld „Ergebnis“ im Jeditable Eingabefeld.

Fügen Sie die folgenden zwei Zeilen zu jquery.jeditable.js:

(um Zeile 95):

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

(um die Linie 350, gleich nach "Erfolg: function (Ergebnis, Status) { "

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

Dann in Ihrem eigenen Code, tun Sie etwas wie folgt aus:

$(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. 

Auf diese Weise können Sie coole Sachen zu tun, wie der Server Abkürzungen zu allen Saiten usw.

Genießen wandeln!

Answer 3

So behandelte ich die JSON-Antwort.

Zuerst den Datentyp mit ajaxoptions einstellen. Behandeln Sie dann Ihre Daten in der Rückruffunktion. Darin ist this.revert Ihr ursprünglicher Wert.

oTable.$('td:eq(3)').editable('/admin/products/add_quantity_used', { 
    "callback" : function(sValue, y) { 
     var aPos = oTable.fnGetPosition(this);   
     if($("#dialog-message").length != 0){ 
      $("#dialog-message").remove(); 
     } 
     if(!sValue.status){ 
     $("body").append('<div id="dialog-message" style="display:none;">'+sValue.value+'</div>'); 
     $("#dialog-message").dialog({ 
      modal: true, 
      buttons: { 
       Ok: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     if(this.revert != '') 
      oTable.fnUpdate(this.revert, aPos[0], aPos[1]); 
     else 
      oTable.fnUpdate("click to edit", aPos[0], aPos[1]); 
     }else 
     if(sValue.status) 
      oTable.fnUpdate(sValue.value, aPos[0], aPos[1]); 


    }, 
    "submitdata" : function(value, settings) { 
     return { 
      "data[users_to_products][users_to_products_id]" : this.parentNode.getAttribute('id'), 
      "column" : oTable.fnGetPosition(this)[2]     
     }; 
    }, 
    "height" : "30px", 
    "width" : "30px", 
    "maxlength" : "3", 
    "name" : "data[users_to_products][quantity_used]", 
    "ajaxoptions": {"dataType":"json"} 
}).attr('align', 'center'); 

Answer 4

Es gibt eine einfache Möglichkeit, dies zu tun, indem Sie den Rückruf verwenden. .editable() konvertiert jede Antwort in eine Zeichenfolge, daher muss die Antwort in eine JSON-Variable konvertiert werden. Die Werte können dann abgerufen und dann mit einer '.text()' Methode geschrieben werden. Überprüfen Sie den Code: