X-editable how to send data with request

Question

I have 4 selects and each proceeding select is based on the selection of the previous selects. How would I send dynamic data with the request for source items?

I tried a function but found out that jQuery getJSON() was asynchronous and would not work the way I needed it to.

Here is what I have currently. And yes, I know, it doesn't work either.

// Location_Site X-editable init
$("#location-aisle").editable({
    url: BASE_URL + "item/edit_item",
    title: "Site aisle",
    params: {
        type: "location-site"
    },
    sourceCache: false,
    source: BASE_URL + "item/get_aisles",
    sourceOptions: {
        headers: {
            "aisle-id": $("#location-site").val()
        }
    }
});

Answer 1

Figured it out using success events and manually setting the source parameter like so.

// Location_Site X-editable init
$("#location-site").editable({
    url: BASE_URL + "item/edit_item",
    title: "Location site",
    params: {
        type: "location-site"
    },
    source: sites,
    success: function (response, newValue) {
        // Get aisles for site
        $.getJSON(BASE_URL + "item/get_aisles/" + newValue, function(data) {
            outputDebug(data);

            // Load aisles into drop down
            if (data && data.length > 0) {
                $("#location-aisle").editable("option", "source", data);
                $("#location-aisle").editable("enable");
            } else {
                window.alert("Failed to load aisles for selected site.");
            }
        }, "json");
    }
});

Here is the next level drop down to give a better example

// Location_Site X-editable init
$("#location-aisle").editable({
    url: BASE_URL + "item/edit_item",
    title: "Site aisle",
    params: {
        type: "location-aisle"
    },
    success: function (response, newValue) {
        // Get columns for site
        $.getJSON(BASE_URL + "item/get_columns/" + newValue, function(data) {
            outputDebug(data);

            // Load aisles into drop down
            if (data && data.length > 0) {
                $("#location-column").editable("option", "source", data);
                $("#location-column").editable("enable");
            } else {
                window.alert("Failed to load columns for selected site.");
            }
        }, "json");
        //
        // Get rows for site
        $.getJSON(BASE_URL + "item/get_rows/" + newValue, function(data) {
            outputDebug(data);

            // Load aisles into drop down
            if (data && data.length > 0) {
                $("#location-row").editable("option", "source", data);
                $("#location-row").editable("enable");
            } else {
                window.alert("Failed to load rows for selected site.");
            }
        }, "json");
    }
});

NOTE TO OTHERS: This code does not check and deal with invalid responses or invalid variable valuables.