jquery multiple select making ajax load when prior select has been enumerated

Question

I have simplified this a little to explain.

If I have multiple dependent selects lets take the simple country town region example.

First select loads countries and the second select load the towns relating to the country selected value and the third select loads the region relating to the town selected value.

I don't want to set async to false.

$(document).ready(function () {
    // Enumerate select lists
    // Country is already filled

    enumerateChildDropDown("Town", $("Country").val());

    // This shouldnt load until the above has finished
    enumerateChildDropDown("region", $("Town").val());

    // Note there could be many more of these
});

function enumerateChildDropDown(selectId, parentId) {

  $.ajax({
    type: "POST",
    dataType: "json",
    url: "@Url.Action("foo", "foo")",
    data: { parentId: parentId},
  }).done(function (returnedData) {
    // Fill selectId here etc
  }).fail(function (jqXHR, exception) {
    // Some Alert
  });
}

This example has been greatly simplified as the real app loads a lot of data to each select and has anything up to 10+ dependent fields hence the use of one ajax function.

I have looked at using some type of callback but I'm finding different examples of JQuery versions which makes things a little confusing. I want to stick to JQuery and not use any other library i.e. knockoutjs.

Probably you already know this info, but in case you don't [here's an example that relates to your question](http://stackoverflow.com/questions/16924082/dynamic-drop-down-box/16924652#16924652). — cssyphus, Aug 12 '13 at 17:48
The problem isn't actually creating the drop down lists but making the child list wait till the parent has finished loading without making async:false. — William Humphreys, Aug 13 '13 at 13:37

score 0 · Answer 1 · answered Aug 12 '13 at 17:12

You could use callbacks, deferreds, or promises. You could even synchronize the jQuery's AJAX by turning async to false (It will default to true).

If you want to stick with jQuery async, then I'd suggest taking a look here: http://api.jquery.com/promise/

From the examples:

var div = $( "<div />" );

div.promise().done(function( arg1 ) {
  // will fire right away and alert "true"
  alert( this === div && arg1 === div );
});

score 0 · Accepted Answer · answered Mar 25 '14 at 20:01

0

This is the sort of thing I was looking for.

https://github.com/gnarf/jquery-ajaxQueue

answered Mar 25 '14 at 20:01

William Humphreys

1,206
1
14
38

jquery multiple select making ajax load when prior select has been enumerated

2 Answers2