Question

I am working on an MVC3 application using the Razor syntax and I have been having some trouble with the AJAX.

The problem follows:
I have a DropDownList of categories defined like so:

 @Html.DropDownList("category_1", 
                 new   SelectList(LocalRuckusMVC.Code.StaticDictionaries.BusinessCategories,                                      
   "Value", "Text"), "Please Select A Category")

When a user selects a category the application makes an AJAX request to the server for a list of the appropriate subcategories for the selected category.

The jquery is set up like so:

$('#category_1').change(function () {
    $('#category_1').cascade({
        url: '@Url.Action("GetSubCats")',
        paramName: 'category_id',
        childSelect: $("#subCategory_1")
    });
});

and the cascade jquery extension:

    (function (jQuery) {
    $.fn.cascade = function (options) {
        var defaults = {};
        var opts = $.extend(defaults, options);

        return this.each(function () {
            jQuery(this).change(function () {
                var selectedValue = jQuery(this).val();
                var params = {};
                params[opts.paramName] = selectedValue;
                jQuery.getJSON(opts.url, params, function (items) {
                    var options = opts.childSelect.options;

                    opts.childSelect.empty();
                    window.console.log(params);
                    window.console.log(items);
                    jQuery.each(items, function (index, item) {
                        //window.console.log(index);
                        window.console.log(opts.childSelect);
                        window.console.log(item.Value);

                        var html = '<option value=\'' + item.Value + '\' >' + item.Text +    
                                     '</option>';
                        opts.childSelect.append(html);
                        window.console.log(html);


                    });
                });
            });
        });
    };
})(jQuery);

Everything works fine as far as the AJAX goes, I get the correct response and all that, the problem is that the user has to select a different category twice before the AJAX request is made.

I have done extensive debugging with firebug and fiddler and the change event doesn’t fire the first time a category is selected, or at least it does not appear to fire when looking at firebug or the chrome dev console.

Anybody have any thoughts??

All help is greatly appreciated.

Oops forgot to add the html select that this jquery method updates so here it is:

 <select id="subCategory_1" name="subCategory_1">
                </select>

Answer 1

Aha I think its because you have another jQuery(this).change event defined on top of the existing change event.

this is the original change event

$('#category_1').change(function () {

then inside the helper function you have

jQuery(this).change(function () {

which I think is asserting; only run the below code if its changed and the select hasnt changed again to trigger that.

try the below revised version.

$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
            var selectedValue = jQuery(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            jQuery.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                window.console.log(params);
                window.console.log(items);
                jQuery.each(items, function (index, item) {
                    //window.console.log(index);
                    window.console.log(opts.childSelect);
                    window.console.log(item.Value);

                    var html = '<option value=\'' + item.Value + '\' >' + item.Text +
                                     '</option>';
                    opts.childSelect.append(html);
                    window.console.log(html);
                });
            });

    });
};

also in your code you have

var options = opts.childSelect.options;

this has the same name as the function(options) and the variable is unused!! so I took it out 🙂 I’ve tested it and its working for me on the first select, hope it helps.