Menu
function CascadeDropDowns(parentClass, childClass, action, callback) { var DropDownId = $(parentClass + " option:selected").val(); $.ajax({ url: "/site/" + 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; callback(); } }); } $(document).ready(function () { // Populates all child drop downs on load var callback = function () { CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }; CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback); // Populates all child drop downs parent change $(".DeviceTypeDDL").change(function () { var callback = function () { CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }; CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback); }); $(".ConfigGroupDDL").change(function () { CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }); }); This runs fine and cascades the dropdowns in the right order, but firefox debugger shows an error and ie throws an alert and asks if Id liek to debug.
Any advice would be great
622
The "callback is not a function" error occurs when we define a callback parameter to a function, but invoke the function without passing a callback as a parameter. To solve the error, provide a function as a default parameter, or always provide a parameter when calling the function.
A callback is a function passed as an argument to another function. This technique allows a function to call another function. A callback function can run after another function has finished.
The callback is a function that's accepted as an argument and executed by another function (the higher-order function). There are 2 kinds of callback functions: synchronous and asynchronous. The synchronous callbacks are executed at the same time as the higher-order function that uses the callback.
This is a big issue caused by coding with complex nested callbacks. Here, each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain.
It is because you are not always passing the callback into that method.
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(); //check before calling it. } It's because you are not always providing a callback to the CascadeDropDowns function.
E.g.
CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
You should modify your function to treat the callback argument as an optionnal argument:
if (callback) { callback(); } A common shorthand for that is:
callback && callback(); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
