jQuery X-Editable: Update select field based on value of other select field

Question

I am using the X-Editable plugin for jquery. I have two select fields that are dynamically supplied with data via ajax. This is my code:

The fields:

<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>

And the 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);
            }
        });

What I want to do is this: When they change the value of $('a.zone') I want $('a.area') to reload the ajax data. How can I go about doing this?

Answer 1

I struggled with this for a bit. Basically, what ended up working was

1. conditioning the update of my downstream editable on the success of an edit of the upstream editable by triggering it in the editables success function,
2. replacing the old downstream editable with a clone of itself to get rid of the attached form (which I haven't figured out how to update directly), and
3. calling the editables function on the replacement.

Check it out below.

    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

Answer 2

I haven't used the plugin before, but glancing at the docs it seems this would work:

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