JEditable, comment gérer une réponse JSON?

Question

En ce moment, la réponse du serveur, je travaille avec renvoie une réponse JSON comme ceci:

{"status":1} 

Après avoir enregistré, lieux jeditable la réponse réelle: {"status":1} sur la page. De toute façon pour contourner ce problème?

Answer 1

donc la solution que je suis venu avec est semblable à ce 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');}); 
       } 
    }); 

Ensuite, la fonction url est

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

Une meilleure solution est de post-traitement des données JSON renvoyées devant elle frappe la page.

Supposons que votre serveur renvoie la chaîne JSON suivante:

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

et vous souhaitez traiter le champ « statut » et « autres » champs, et afficher le « résultat » dans le champ de saisie jeditable.

Ajoutez les 2 lignes à jquery.jeditable.js suivantes:

(autour de la ligne 95):

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

(autour de la ligne 350, juste après «succès: fonction (résultat, état) { "

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

Ensuite, dans votre propre code, faire quelque chose comme ce qui suit:

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

Cela vous permet de faire des choses sympas comme avoir votre serveur convertir les abréviations en chaînes complètes, etc.

Enjoy!

Answer 3

Voici comment j'ai géré la réponse json.

D'abord, définissez le type de données à l'aide de ajaxoptions. Ensuite, gérer vos données dans la fonction de rappel. Là, this.revert est votre valeur 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

Il existe un moyen simple de faire cela en utilisant le rappel. .editable() convertit toute réponse à une chaîne, donc la réponse doit être convertie en une variable JSON. Les valeurs peuvent ensuite être récupérées puis écrites en utilisant une méthode '.text()'. Vérifiez le code:

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