Running code on page loaded?

Question

Hi,

I have a MVC view that contains some dropdowns like this :

        <%: Html.DropDownListFor(model => model.CS.C1, Model.CS.Category1List, "-- Välj kategori --")%>
        <%: Html.DropDownListFor(model => model.CS.C2, Model.CS.Category2List, "-- Välj kategori --")%>
        <%: Html.DropDownListFor(model => model.CS.C3, Model.CS.Category3List, "-- Välj kategori --")%>
        <%: Html.DropDownListFor(model => model.CS.C4, Model.CS.Category4List, "-- Välj kategori --")%>
        <%: Html.DropDownListFor(model => model.CS.C5, Model.CS.Category5List, "-- Välj kategori --")%>
        <%: Html.DropDownListFor(model => model.CS.C6, Model.CS.Category6List, "-- Välj kategori --")%>

To compliment this with AJAX calls (to create CascadingDropDown) I have the following javascript :

$(document).ready(function () {

            $("#CS_C1").change(function () { lastCategoryId = $("#CS_C1").val() });
            $("#CS_C2").change(function () { lastCategoryId = $("#CS_C2").val() });
            $("#CS_C3").change(function () { lastCategoryId = $("#CS_C3").val() });
            $("#CS_C4").change(function () { lastCategoryId = $("#CS_C4").val() });
            $("#CS_C5").change(function () { lastCategoryId = $("#CS_C5").val() });
            $("#CS_C6").change(function () { lastCategoryId = $("#CS_C6").val() });

            $("#CS_C2").CascadingDropDownCategory("#CS_C1", '/AdCategory/GetCategoriesByParent', '', true, SetFilter);
            $("#CS_C3").CascadingDropDownCategory("#CS_C2", '/AdCategory/GetCategoriesByParent', '', true, SetFilter);
            $("#CS_C4").CascadingDropDownCategory("#CS_C3", '/AdCategory/GetCategoriesByParent', '', true, SetFilter);
            $("#CS_C5").CascadingDropDownCategory("#CS_C4", '/AdCategory/GetCategoriesByParent', '', true, SetFilter);
            $("#CS_C6").CascadingDropDownCategory("#CS_C5", '/AdCategory/GetCategoriesByParent', '', true, SetFilter);

            $("#LS_L2").CascadingDropDown("#LS_L1", '/Location/GetLocationsByParent', '', true);

            alert(lastCategoryId);
            SetFilter(lastCategoryId);
        });

The CascadingDropDownCategory function is from this site.

When doing a post the dropdowns is set properply but when running

SetFilter(lastCategoryId);

The lastCategoryId is sill -1? I can see that the dropdowns have got values and should also have triggered the change event? Why is i getting -1? How could I solve it?

BestRegards

Answer 1

lastCategoryId is set in the .change() callback (which means it won't get set until the <select> changes), so by the end you get to the end of your document ready function it won't be set yet.

Also, whenever you declare a variable without var, it becomes global. Always declare variables with var at the start of a function.