JEditable, come gestire una risposta JSON?

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

{"status":1} 

Dopo aver salvato, posizioni giuste la risposta effettiva: {"status":1} sulla pagina. Ad ogni modo per aggirare questo problema?

Una soluzione migliore consiste nel post-processare i dati JSON restituiti prima che colpiscano la pagina.

Supponiamo che il tuo server restituisca la seguente stringa json:

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

e si desidera elaborare i campi “stato” e “altro” e visualizzare il campo “risultato” nel campo di inserimento jeditable.

Aggiungi le seguenti 2 righe a jquery.jeditable.js:

(intorno alla linea 95):

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

(attorno alla riga 350, subito dopo “success: function (result, status) {”

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

Quindi, nel tuo codice, fai qualcosa di simile al seguente:

 $(some_field).editable( '/some_url_on_your_server', { indicator : "", 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 per convertire le abbreviazioni in stringhe piene ecc.

Godere!

C’è un modo semplice per farlo usando 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 ()’. Controlla 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); } }); 

Questo è il modo in cui ho gestito la risposta JSON.

Per prima cosa, imposta il tipo di dati usando 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(''); $( "#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'); 

Quindi la soluzione che ho trovato è simile a quello che madcapnmckay ha risposto qui.

 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');}); } }); 

Quindi 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); }