JQuery X-Editable: Обновить поле выбора, основанное на значении другого поля select

Я использую плагин X-Editable для jquery. У меня есть два поля выбора, которые динамически поставляются с данными через ajax. Это мой код:

Поля:

<td class="center">
<a href="#" data-name="'.$res['mid'].'" class="zone">'.$zonename.'</a>
</td>
<td class="center">
<a href="#" data-name="'.$res['mid'].'" class="area" data-zona="'.$zoneuid.'">'.$areaname.'</a>
</td>

И jQuery:

$('a.zone').editable({
            type: 'select',
            url: '../admin/callbacks/quickEdit.php?t=zone',
            pk: 1,
            showbuttons: true,
            source: function() {
                var result;
                $.ajax({
                    url: '../admin/callbacks/jsonDataList.php',
                    data: {t: 'zone'},
                    type: 'GET',
                    global: false,
                    async: false,
                    dataType: 'json',
                    success: function(data) {
                        result = data;
                    }
                });
                return result;
            },
            success: function(response, newValue) {
                $(this).parent().siblings('td').children('a.area').data('zona', newValue);
                console.log(response, newValue);
            }
        });
        $('a.area').editable({
            type: 'select',
            pk: 1,
            url: '../admin/callbacks/quickEdit.php?t=area',
            showbuttons: true,
            source: function() {
                var result;
                var zona = $(this).data('zona');
                $.ajax({
                    url: '../admin/callbacks/jsonDataList.php',
                    data: {t: 'area', zone: zona},
                    type: 'GET',
                    global: false,
                    async: false,
                    dataType: 'json',
                    success: function(data) {
                        result = data;
                    }
                });
                return result;
            },
            success: function(response, newValue) {
                console.log(response);
            }
        });

Что я хочу сделать, так это: когда они меняют значение $('a.zone'), я хочу, чтобы $('a.area') перезагружал данные ajax. Как я могу это сделать?

Ответ 1

Я немного боролся с этим. В основном, что закончилось тем, что работало

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

Проверьте это ниже.

    var editable_triggered_updates = function (changed_element, newValue) { 

        var update_second_editable = function (el_id, newUpstreamValue) {
            var data = { 
                id_upstream_editable: "oldUpstreamValue" 
            };
            if (data[el_id]===undefined) {
                return;
            }

            // IE cache workaround
            var n = new Date().getTime();

            $.getJSON(my_lookup_url, {t:n, my_get_parameter: newUpstreamValue}, function(return_object){

                // Step 2: get rid of old editable form by replacing editable with clone
                $('#id_downstream_editable').replaceWith($('#id_downstream_editable').clone()); 
                $('#id_downstream_editable').attr('data-source', return_object['data-source']);

                // Step 3: call editable on new objects
                $('#id_downstream_editable').editable({ 
                    mode: 'inline',
                    ajaxOptions: {
                        dataType: 'json',
                        sourceCache: 'false'
                    }
                });
            });
        };

        update_second_editable(changed_element.id, newValue);
    };

    !function (triggered_updates) { // editables setup
        $(".editable").editable({
            mode: 'inline', 
            ajaxOptions: {
                dataType: 'json',
                sourceCache: 'false'
            }
            success: function(response, newValue) {
                triggered_updates(this, newValue); // Step 1
            },
        });
    }(editable_triggered_updates || console.log); // Step 1 also

Ответ 2

Я раньше не использовал плагин, но, глядя на документы, похоже, это сработает:

 $('a.zone').editable({
        type: 'select',
        url: '../admin/callbacks/quickEdit.php?t=zone',
        pk: 1,
        showbuttons: true,
        source: function() {
            var result;
            $.ajax({
                url: '../admin/callbacks/jsonDataList.php',
                data: {t: 'zone'},
                type: 'GET',
                global: false,
                async: false,
                dataType: 'json',
                success: function(data) {
                    result = data;
                }
            });
            return result;
        },
        success: function(response, newValue) {
            $(this).parent().siblings('td').children('a.area').data('zona', newValue);
            console.log(response, newValue);
        }
    });

function loadArea(){
    $('a.area').editable({
        type: 'select',
        pk: 1,
        url: '../admin/callbacks/quickEdit.php?t=area',
        showbuttons: true,
        source: function() {
            var result;
            var zona = $(this).data('zona');
            $.ajax({
                url: '../admin/callbacks/jsonDataList.php',
                data: {t: 'area', zone: zona},
                type: 'GET',
                global: false,
                async: false,
                dataType: 'json',
                success: function(data) {
                    result = data;
                }
            });
            return result;
        },
        success: function(response, newValue) {
            console.log(response);
        }
    });

}

loadArea();

$('a.zone').on('save', function(e, params) {
    loadArea();
});