JEditable，如何處理JSON響應？

Question

現在，我使用的服務器響應發回這樣的JSON響應：在頁面上{"status":1}：

{"status":1} 

節能，jeditable地方實際的響應之後。無論如何要解決這個問題？

Answer 1

於是我想出了一個解決方案是類似於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');}); 
       } 
    }); 

然後鏈接功能

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

更好的解決方案是進行後處理之前它返回的JSON數據點擊該頁面。

假設你的服務器返回以下JSON字符串：

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

，你想處理「狀態」和「其他」領域，並在jeditable輸入字段中顯示的「結果」字段。

以下2行添加到jquery.jeditable.js：

（圍繞線95）：

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

（圍繞線350，右後的「成功：功能（因此，狀態）{ 「

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

然後，在你自己的代碼，這樣做如下：

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

這允許你做很酷的東西，比如讓你的服務器將縮寫轉換爲完整的字符串等。

享受！

Answer 3

這是我如何處理json響應。

首先，使用ajaxoptions設置數據類型。然後，在回調函數中處理您的數據。其中，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

有一個簡單的方法來做到這一點，通過使用回調。 .editable()將任何響應轉換爲字符串，因此必須將響應轉換爲JSON變量。然後可以檢索這些值，然後使用'.text（）'方法寫入。檢查代碼：

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