JEditable, ¿cómo manejar una respuesta JSON?

Question

En este momento, la respuesta del servidor que estoy trabajando con devuelve una respuesta JSON como esto:

{"status":1} 

Después de guardar, lugares jeditable la respuesta real: {"status":1} en la página. De todos modos para evitar este problema?

Answer 1

Así que la solución que se me ocurrió es similar a lo que 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');}); 
       } 
    }); 

Entonces la función url es

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 solución mejor es el procesamiento posterior de los datos JSON devueltos antes de que golpea la página.

Supongamos que el servidor devuelve la siguiente cadena JSON:

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

y que le gustaría para procesar el "status" y "otros" campos, y mostrar el campo "número" en el campo de entrada jeditable.

Añadir las siguientes líneas 2 a jquery.jeditable.js:

(alrededor de la línea 95):

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

(alrededor de la línea 350, justo después de "éxito: la función (resultado, el estado) { "

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

Luego, en su propio código, hacer algo como lo siguiente:

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

Esto le permite hacer cosas interesantes como hacer que su servidor convierta abreviaturas en cadenas completas, etc.

¡Disfrútelo!

Answer 3

Así es como manejé la respuesta json.

Primero, configure el tipo de datos usando ajaxoptions. Luego, maneje sus datos en la función de devolución de llamada. Ahí, this.revert es su valor original.

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

Hay una manera simple de hacerlo utilizando la devolución de llamada. .editable() convierte cualquier respuesta a una cadena, por lo que la respuesta debe convertirse en una variable JSON. Los valores pueden luego recuperarse y luego escribirse usando el método '.text()'. Compruebe el código:

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