JEditable, как обработать ответ JSON?

Question

Прямо сейчас ответ сервера, с которым я работаю, возвращает ответ JSON, подобный этому:

{"status":1}

После сохранения jeditable размещает фактический ответ: {"status":1} на странице. В любом случае, чтобы обойти эту проблему?

Answer 1

Лучшим решением является постобработка возвращенных данных json до того, как они попадут на страницу.

Предположим, ваш сервер возвращает следующую строку json:

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

и вы хотите обработать поля «status» и «other» и отобразить поле «result» в поле ввода jeditable.

Добавьте следующие 2 строки в jquery.jeditable.js:

(вокруг строки 95):

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

(около строки 350, сразу после "success: function (result, status) {"

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 2

Есть простой способ сделать это с помощью обратного вызова. .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);
    }
});

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

Итак, решение, которое я придумал, похоже на то, что madcapnmckay ответил здесь.

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

Тогда функция 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);
                    }