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

ajax, jquery, jquery-plugins, twitter-bootstrap

Solution

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

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

- 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

- 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

Problem

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?

Original source