Jeditable и проблема с полями "select" - доступ и обновление данных JSON динамически со стороны клиента - PullRequest
Новая
       6

Jeditable и проблема с полями "select" - доступ и обновление данных JSON динамически со стороны клиента

1 голос
/ 09 мая 2011

Я использую Jeditable с Zend.

Большинство обновлений я хочу сделать с Jeditable.Таким образом, страница показывает информацию, и каждое поле редактируется с помощью Jeditable.Очень хорошо работает с «текстовыми» полями.

Вот проблема --- Именно с раскрывающимся списком у меня есть раскрывающийся список США.Jeditable show - это правильно, но поскольку это ajax-запрос, возникают две специфические проблемы

1) Показывает значение как ID, а не имя.Я думаю, что я могу обработать это от ответа сервера, чтобы отправить имя вместо ID, но я хотел бы сделать это на стороне клиента

2) После редактирования он теряет «выбранный» элемент.В идеале, он должен обновить «выбранный» элемент, так как он изменился.Если я обновлю страницу, все будет хорошо, потому что это будет свежий запрос, но я не буду этого делать.Вот и вся идея Ajax: -)

В идеале я хочу перехватить ответ от сервера и получить доступ к раскрывающемуся списку (данные JSON), показать метку для идентификатора состояния и динамически изменить данные Json наизменить выбранное значение для выпадающего списка.

Итак, как получить доступ и управлять данными Json на стороне клиента из Jeditable

, вот мой фрагмент кода 

$('.edit_state').editable('/User/user/updprofile',
{  id   : 'element_id',
       name : 'new_value',  
   data   : '<?php  echo json_encode(array_merge($this->aStateIdOptions, array("selected" => $this->user->state_id))); ?>',
   type   : 'select',
   submit : 'OK',
   indicator :  '<img width=14px height=14px src="/images/ui/ajax-spinner.gif">',
     style     : 'border: 0px',
    onerror: function(settings, original, xhr) {
    original.reset()
    alert(xhr.responseText)
    },
   intercept: function (jsondata) {
     obj = jQuery.parseJSON(jsondata);
     alert(obj);
     //alert(data);
     // do something 
     return(obj);
     },
   callback : function(value, settings) {
     console.log(this);
     alert(this);
     console.log(value);
     alert(value);
     console.log(settings);
     alert(settings);
     }    

});

1 Ответ

1 голос
/ 27 июля 2011

Я проверил исходный код jEditable, насколько я вижу, основываясь на исходном коде, есть код для установки значений для опций. 

var option = $('<option />').val(key).append(json[key]);

Я думаю, вам нужно отправить информацию вроде [CA: Калифорния, ...].Однако есть код для выбранного свойства элемента option. 

/* Loop option again to set selected. IE needed this... */ 
$('select', this).children().each(function() {
    if ($(this).val() == json['selected'] || 
        $(this).text() == $.trim(original.revert)) {
            $(this).attr('selected', 'selected');
    }
});

Я думаю, что вам нужно отправить такую ​​информацию, как [{CA: California, selected: selected}, {TX: Texas, selected: null}ИЛИ {TX: Техас}, ...] КОД ИСТОЧНИКА 

select: {
    element : function(settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {      
            eval ('var json = ' + data);
        } else {
        /* Otherwise assume it is a hash already. */
            var json = data;
        }
        for (var key in json) {
            if (!json.hasOwnProperty(key)) {
                continue;
            }
            if ('selected' == key) {
                continue;
            } 
            var option = $('<option />').val(key).append(json[key]);
            $('select', this).append(option);    
        }                    
        /* Loop option again to set selected. IE needed this... */ 
        $('select', this).children().each(function() {
            if ($(this).val() == json['selected'] || 
                $(this).text() == $.trim(original.revert)) {
                    $(this).attr('selected', 'selected');
            }
        });
    }
}

},

...