Question

I am trying to attach the same jQuery and JSON ASP.NET MVC3 Method to two different <select> elements:

<select id="StartYear">
<option value="">Select Year</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>

<select id="StartMonth">
<option value="">Select Month</option>
</select>

Same applies for <select> elements with ids “EndYear” and “EndMonth”.

I want to attach to both “Start Year” and “End Year” the same jQuery function:

$('[id$="Year"]').change(function () {
        var selectedYear = $(this).val();
        var selectedId = $(this).attr('id')
        if (selectedYear != null && selectedYear != '') {
            $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                var monthsSelect = $('#StartMonth');
                if (selectedId == 'EndYear') {
                    monthsSelect = $('#EndMonth');
                }
                monthsSelect.empty();
                daysSelect.prepend("<option text='-- select month --' value='' selected='selected'></option>");
                $.each(months, function (index, month) {
                    monthsSelect.append($('<option/>', {
                        value: month.value,
                        text: month.text
                    }));
                });
            });
        }
    });

However, this code does not work. I debugged it with Bugzilla and I found out that this condition (selectedId == 'EndYear') breaks the function. The variable selectedId is in the closure scope but I don’t know how to bring it inside the function scope. Otherwise I don’t know what it cna be the cause.
Keep in mind that without that condition the code was working (of course just with #StartMonth)

Answer 1

If I correctly understand your problem the variable selectedId can do be accessed inside of success handler of $.getJSON, but the value of the variable can be already changed by another change event.

For example if two change events will be stated in short time interval from for example “#EndYear” and “#StartYear” then could be the following

1. change events for “#EndYear” will be triggered
2. selectedId variable will be set to “EndYear”
3. first $.getJSON will be started
4. change events for “#StartYear” will be triggered
5. selectedId variable will be set to “StartYear”
6. second $.getJSON will be started
7. first $.getJSON will be finished and the value of selectedId variable will be “StartYear” inside of the success handler
8. second $.getJSON will be finished and the value of selectedId variable will be “StartYear” inside of the success handler

So I think that you need just need to have different instances of selectedId variable to use the value which was before the $.getJSON took place. You can implement that in different way. It seems the most native for me to replace $.getJSON to $.ajax and to use context parameter of $.ajax. The code could be about the following

$('[id$="Year"]').change(function () {
    var selectedYear = $(this).val();
    var selectedId = $(this).attr('id')
    if (selectedYear != null && selectedYear != '') {
        //$.getJSON('@Url.Action("Months")', {year: selectedYear}, function(months){
        $.ajax({
            url: '@Url.Action("Months")',
            dataType: 'json',
            data: { year: selectedYear },
            context: {selectedId: selectedId},
            success: function (months) {
                var selectedId = this.selectedId; // get from context
                ....
            }
        });
    }
});