IE combo box usage, freezing on selection

I'm using a combo box to select one of four school houses.

Once the selection has been made, I'm using jQuery to run a few functions.

One of the required functions utilises our VLE's own custom APIs. A limitation on the specific API I'm using means that we can only retrieve information for 100 users per call. As such, for a school of 1300, I'm having to run 26 calls (one call for each surname initial).

It works well enough for how often it will be required. I have a loading GIF which holds place until the information is returned.

In FireFox this works as intended, but in Internet Explorer EDIT: VERSION 8 the drop-down simply freezes until the information has been retrieved.

Is there any way to rectify this easily? I don't particularly fancy overhauling the majority of the code - this feature won't be used a huge amount.

    widget.onLoad = function(){
        HPAnalysisObject.init();

        $('select#house_picker').change( function() {
            var val = $(this).val();
            val = val开发者_如何学运维.split(",");
            var label = val[0];
            var house_id = val[1];
            HPAnalysisObject.initHPTotals( house_id, label );
        } );
    }

    HPAnalysisObject.initHPTotals = function(house_id, label) {
        HPAnalysisObject.id_list = [];
        $('div#display').html('<img src="/user/74/168586.gif" alt="LOADING..." />');

        for (var i = 1; i <= 26; i++) { 
            initial = String.fromCharCode(64 + i);
            Frog.API.get("users.search", {
                "params": {"surname": initial, "group": house_id},
                "onSuccess": HPAnalysisObject.addUsers
            });
        }

        HPAnalysisObject.setLabel(label);
        HPAnalysisObject.getHPTotals();
    };

There are additional functions in place, but it's this Frog.API.get call which slows everything down (it makes 26 ajax calls... :).

So, basically, I'm hoping there will be something I can put in place before that call which allows the combo box to return to its un-dropped-down state, and thus show my loading GIF.

Internet Explorer ^^

FireFox ^^

Many thanks.

The Javascript code runs before the UI is allowed to update.

Defer the call to initHPTotals so that the Javascript code executes after the combo box has collapsed, using for example setTimeout. 10 or 20 milliseconds should be fine:

    $('select#house_picker').change( function() {
        var val = $(this).val();
        val = val.split(",");
        var label = val[0];
        var house_id = val[1];
        setTimeout(function() {
            HPAnalysisObject.initHPTotals( house_id, label );
        }, 10);
    } );

Haven't tested this really, but you can try to change HPAnalysisObject.initHPTotals( house_id, label ); to:

setTimeout(function() { HPAnalysisObject.initHPTotals( house_id, label ) }, 100);

This should allow IE to escape the change event.

Also if loading data takes really long then maybe you should change the behavior of the drop down. If some user would make a mistake you would load the data and then load another set. And so you could add a small button near the drop down and load onclick.