StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It might be, that your second <code>CascadeDropDowns</code> function is executed before the first one has finished its execution (since you're doing an AJAX call, which is asynchronous).</p> <p>One way of making the second function wait for the first one is by utilizing jQuery deferreds:</p> <pre><code>function CascadeDropDowns(parentClass, childClass, action) { var completeDeferred = $.Deferred(); var DropDownId = $(parentClass + " option:selected").val(); $.ajax({ url: "/Terminals_configuration/" + action, data: { DropDownId: DropDownId }, dataType: "json", type: "POST", error: function () { alert("An error occurred."); }, success: function (data) { var items = ""; $.each(data, function (i, item) { items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>"; }); $(childClass).html(items); $(childClass)[0].selectedIndex = 0; completeDeferred.resolve(); } }); return completeDeferred; } </code></pre> <p>then use the returned deferred:</p> <pre><code>$(".DeviceTypeDDL").change(function () { var deferred = CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups"); deferred.then(function() { CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }) }); </code></pre> <p>An easier way might be to modify the function to accept a callback:</p> <pre><code>function CascadeDropDowns(parentClass, childClass, action, callback) { var DropDownId = $(parentClass + " option:selected").val(); $.ajax({ url: "/Terminals_configuration/" + action, data: { DropDownId: DropDownId }, dataType: "json", type: "POST", error: function () { alert("An error occurred."); }, success: function (data) { var items = ""; $.each(data, function (i, item) { items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>"; }); $(childClass).html(items); $(childClass)[0].selectedIndex = 0; if (callback) { callback(); } } }); } </code></pre> <p>then use it like this:</p> <pre><code>$(".DeviceTypeDDL").change(function () { var callback = function() { CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }; CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload