JEditable, jak obsłużyć odpowiedź JSON?

Question

Teraz odpowiedź serwera pracuję z odsyła odpowiedź JSON tak:

{"status":1} 

Po zapisaniu jeditable umieszcza faktyczny odpowiedź: {"status":1} na stronie. W każdym razie, aby obejść ten problem?

Answer 1

więc rozwiązanie wymyśliłem jest podobny do tego, co madcapnmckay 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');}); 
       } 
    }); 

Następnie funkcja url jest

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

Lepszym rozwiązaniem jest post-process zwracanych danych json przed nim uderza w stronę.

Załóżmy, serwer zwraca następujący ciąg json:

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

i chcesz przetworzyć „status” i „innych” pól i wyświetlić „Wynik” pole w polu wejściowym jeditable.

Dodaj następujące 2 linie do jquery.jeditable.js:

(około 95 linii):

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

(około 350 linii, tuż po "sukcesie: function (wynik, status) { "

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

Następnie, w swoim własnym kodzie, zrobić coś jak następuje:

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

Pozwala to zrobić fajne rzeczy jakby serwer konwersji skróty do pełnych ciągów itp

Enjoy!

Answer 3

W ten sposób obsłużyłem odpowiedź JSON. Najpierw ustaw typ danych za pomocą ajaxoptions. Następnie obsłuż swoje dane w funkcji zwrotnej. W tym przypadku wartość domyślna to this.revert.

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

Jest to prosty sposób to zrobić za pomocą zwrotnego. .editable() konwertuje dowolną odpowiedź na ciąg znaków, więc odpowiedź musi zostać przekonwertowana na zmienną JSON. Wartości można następnie pobrać, a następnie zapisać za pomocą metody ".text()". Sprawdź kod:

$("#myField").editable("http://www.example.com/save.php", { 
    submit : 'Save', 
    cancel : 'Cancel', 
    onblur : "ignore", 
    name  : "sentText", 
    callback : function(value, settings) { 
     var json = $.parseJSON(value); 
     $("#myField").text(json.sentText); 
    } 
});