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

Title: How to ensure all ComboBoxes are loaded before Form Data Loads?
Post by: 2plus2 on March 15, 2013, 11:04:18 PM

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.

Title: Re: How to ensure all ComboBoxes are loaded before Form Data Loads?
Post by: stworthy on March 16, 2013, 07:15:33 AM

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',...);
});

Title: Re: How to ensure all ComboBoxes are loaded before Form Data Loads?
Post by: 2plus2 on March 18, 2013, 08:57:49 AM

Quote from: stworthy on March 16, 2013, 07:15:33 AM

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.

Title: Re: How to ensure all ComboBoxes are loaded before Form Data Loads?
Post by: stworthy on March 18, 2013, 09:21:35 AM

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);
		}
	});
};

Title: Re: How to ensure all ComboBoxes are loaded before Form Data Loads?
Post by: 2plus2 on March 18, 2013, 10:18:39 AM

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.

Title: Re: How to ensure all ComboBoxes are loaded before Form Data Loads?
Post by: 2plus2 on March 20, 2013, 09:03:42 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: 2plus2 on March 15, 2013, 11:04:18 PM