How to ensure all ComboBoxes are loaded before Form Data Loads?

[2plus2]

I have a simple form with 4 combo boxes that get their data via AJAX. I'm loading the combo boxes through the onBeforeLoad event of the form.

How do I make sure that all the combo boxes are loaded before firing off the load command for the form? I've setup a onLoadSuccess for each combo box to run a function that increments a counter. Then I tried to read that counter with a setInterval function, only running the form load method when the counter hits 4.

But that didn't work. It seems to pause everything while waiting for the setInterval to run.

Thanks.

[stworthy]

An alternative solution is to get all combobox data and then load into combobox by calling 'loadData' method. The code looks like this.

Code:

$.get('...',function(data){
	// load combobox data first
	$('#c1').combobox('loadData',data.d1);
	$('#c2').combobox('loadData',data.d2);
	$('#c3').combobox('loadData',data.d3);
	$('#c4').combobox('loadData',data.d4);
	// now load your form data
	$('#ff').form('load',...);
});

[2plus2]

An alternative solution is to get all combobox data and then load into combobox by calling 'loadData' method.

Ah - I see. One big JSON object with the combo boxes and the form data. One Ajax call instead of multiple.

The other ugly way I thought of was to stack the calls in the success event for each combo and cascade that down. Very ugly.

I would suggest that one enhancement to consider is a flag for these data loads for synchronous Ajax communications. When I rolled my own tools, I'd switch back and forth between Sync and Async when I needed the browser to wait for the response before continuing.

Just a thought - thanks.

[stworthy]

To sync request combobox data, override the 'loader' function as:

Code:

$.fn.combobox.defaults.loader = function(param, success, error){
	var opts = $(this).combobox('options');
	if (!opts.url) return false;
	$.ajax({
		async: false,
		type: opts.method,
		url: opts.url,
		data: param,
		dataType: 'json',
		success: function(data){
			success(data);
		},
		error: function(){
			error.apply(this, arguments);
		}
	});
};

[2plus2]

Right - but I was hoping to have less code over all. :-) I don't like getting in the habit of creating over rides.

Much appreciated.

[2plus2]

P.S. Here's a better solution we came up with using jQuery and the AjaxComplete event:

    var ajaxCount = 0;

    function checkLoadStatus() {
        ajaxCount = ajaxCount + 1;

        if (ajaxCount == 4) {
            $('#ff').form('load', ' ... ');
        }
    }

    $(document).ajaxComplete(function () {
        checkLoadStatus();
    });

Where ajaxCount is the number of events you need to count / track before you load the form.

Hope that helps.