JEditable, come gestire una risposta JSON?

Question

In questo momento, la risposta del server su cui sto lavorando con restituisce una risposta JSON come questo:

{"status":1} 

Dopo il salvataggio, i luoghi jeditable la risposta effettiva: {"status":1} sulla pagina. Ad ogni modo per aggirare questo problema?

Answer 1

Quindi la soluzione mi è venuta è simile a quello che 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');}); 
       } 
    }); 

Allora la funzione url è

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

Una soluzione migliore è quella di post-elaborazione dei dati JSON restituiti prima di esso colpisce la pagina.

Supponiamo che il server restituisce la seguente stringa JSON:

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

e si vorrebbe elaborare il "stato" e "altri" campi, e visualizzare il campo "risultato" nel campo di immissione jeditable.

Aggiungere le seguenti 2 linee a jquery.jeditable.js:

(attorno alla riga 95):

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

(attorno alla riga 350, subito dopo "il successo: la funzione (risultato, stato) { "

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

Poi, nel proprio codice, fare qualcosa di simile al seguente:

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

Questo ti permette di fare cose interessanti come avere il tuo server convertire le abbreviazioni in stringhe piene ecc.

Divertiti!

Answer 3

Ecco come ho gestito la risposta JSON.

Innanzitutto, impostare il tipo di dati utilizzando ajaxoptions. Quindi, gestisci i tuoi dati nella funzione di callback. In questo, this.revert è il tuo valore originale.

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

C'è un modo semplice per farlo utilizzando il callback. .editable() converte qualsiasi risposta in una stringa, quindi la risposta deve essere convertita in una variabile JSON. I valori possono quindi essere recuperati e quindi scritti utilizzando un metodo '.text()'. Controllare il codice:

$("#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); 
    } 
});