strange behaviour bindingcomplete. It 's called many times

[ae50042Participant]

Hi Guys,

I have a problem with JqWidget jGrid component, basically when page is rendered, I press the submit but and the grid is loaded correctly ( I put an alert just to be sure on bindingcomplete event), but the second time I press the sumbit button, the grid is displayed, but bindingcomplete event is fired twice ( I see two alert) , if I press another time submit button bindingcomplete is fired three times and so on.
The problem is that from the second submitting, I receive the error:

Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the 'bindingcomplete' event. Call this function in the 'bindingcomplete' event handler.

Can someone help me please? This the code:

jQuery(document).ready(function() {
    main_function();
});

function main_function() {

	id_dispositivo = jQuery("#id_dispositivo").val();
	jQuery("#lb_id_disp").prop("innerHTML", id_dispositivo);
	type_date = "D";
	
	var dataFields = [
	                  { name: 'utc', map:'can>utc', type:'date', hidden: true },
	                  { name: 'local', map:'can>local', type:'date', width:140},
	                  { name: 'ch01', map:'can>ch01'},
	                  { name: 'ch02', map:'can>ch02'},
	                  { name: 'ch03', map:'can>ch03'},
	                  { name: 'ch04', map:'can>ch04'},
	                  { name: 'ch05', map:'can>ch05'},
	                  { name: 'ch06', map:'can>ch06'},
	                  { name: 'al01', map:'can>al01'},
	                  { name: 'al02', map:'can>al02'},
	                  { name: 'al03', map:'can>al03'},
	                  { name: 'al04', map:'can>al04'},
	                  { name: 'al05', map:'can>al05'},
	                  { name: 'al06', map:'can>al06'}
	                  ];
	
	jQuery("#jqxTabs").jqxTabs({
		width : '90%',
		height : '600px',
		position : 'top'
	});
	
	jQuery("#jqxcheckbox").jqxCheckBox({width : 120});
	
	jQuery.get(url_get, {
		"id_disp" : id_dispositivo,
		"type" : "ifaces"
	}, 
	function(data, status) {
		var source_ddl = JSON.parse(data).source;

		for (var i = 0; i < source_ddl.length; i++) {
			source_ddl[i].group = labels[source_ddl[i].group];
		}

		jQuery("#jqxDDLiface").jqxDropDownList({
			source : source_ddl,
			selectedIndex : 0,
			width : '100%',
			height : 25,
			displayMember : "nome"
		});

		jQuery("#lb_iface").prop("innerHTML", labels["IFACE"]);
		
		buildDateTime();
	});

	function buildDateTime() {
		var today = new Date();
		var da_def = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate() + " 00:00:00";
		var a_def = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate() + " 23:59:59";

		// ------------ creazione dei jqxDateTimeInput -------------
		var minDate = new Date(2014, 0, 1);
		var maxDate = new Date();

		jQuery("#lb_da_data").prop("innerHTML", labels["DA_DATA"]);
		jQuery("#lb_a_data").prop("innerHTML", labels["A_DATA"]);

		jQuery("#jqxButton_submit").jqxButton({
			width : '100%'
		});
		jQuery("#jqxDaData").jqxDateTimeInput({
			min : minDate,
			max : maxDate,
			width : '100%',
			height : '25px'
		});
		jQuery("#jqxAData").jqxDateTimeInput({
			min : minDate,
			max : maxDate,
			width : '100%',
			height : '25px'
		});

		jQuery.getScript('../../media/system/jqWidgets/globalization/globalize.culture.' + lang + '.js', function() {
			jQuery("#jqxDaData").jqxDateTimeInput({
				culture : lang
			});
			jQuery("#jqxAData").jqxDateTimeInput({
				culture : lang
			});
		});

		jQuery("#jqxDaData").on('change', function(event) {
			var jsDaData = event.args.date;
			var jsAData = jQuery("#jqxAData").jqxDateTimeInput("value");

			if (jsDaData.getTime() > jsAData.getTime()) {
				alert(labels["ALERT_DATE_NOT_CORRECT"]);
				jQuery("#jqxDaData").jqxDateTimeInput({
					value : jsAData
				});
			}
		});

		jQuery("#jqxAData").on('change', function(event) {
			var jsAData = event.args.date;
			var jsDaData = jQuery("#jqxDaData").jqxDateTimeInput("value");

			if (jsDaData.getTime() > jsAData.getTime()) {
				alert(labels["ALERT_DATE_NOT_CORRECT"]);
				jQuery("#jqxAData").jqxDateTimeInput({
					value : jsDaData
				});
			}
		});

		jQuery("#jqxButton_submit").on('click', function() {
			var data_da = jQuery("#jqxDaData").jqxDateTimeInput("value");
			var data_a = jQuery("#jqxAData").jqxDateTimeInput("value");
			var da_def = data_da.getFullYear() + "-" + (data_da.getMonth() + 1 ) + "-" + data_da.getDate() + " 00:00:00";
			var a_def = data_a.getFullYear() + "-" + (data_a.getMonth() + 1) + "-" + data_a.getDate() + " 23:59:59";
			var id_face = jQuery("#jqxDDLiface").jqxDropDownList("getSelectedItem").originalItem.id;
			var url_get_new = url_get + "?iface=" + id_face + "&id_disp=" + id_dispositivo + "&a=" + a_def + "&da=" + da_def + "&type_date=" + type_date;

			jQuery.get(url_get, {
				"type" : "columns_series",
				"iface" : id_face,
				"id_disp" : id_dispositivo,
				"a" : a_def,
				"da" : da_def
	
			})
			.done(function(data) {
	
				var phpColumns = JSON.parse(data).columns;
				var phpSeries = JSON.parse(data).seriesGroup;
	
				var source = {
					datatype : "json",
					datafields : dataFields,
					id : 'Data',
					url : url_get_new,
					root : 'dati'
				};
	
				jQuery("#jqxgrid").on('bindingcomplete', function(event) {
					alert("complete");
					jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "utc", 'editable', false);
					jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'editable', false);
				});
						
				if (jQuery('#jqxTabs').jqxTabs('selectedItem') == 0) {
					var dataAdapter = new jQuery.jqx.dataAdapter(source);
					jQuery("#jqxgrid").jqxGrid({
						width : "98%",
						height : "520",
						autoHeight : false,
						source : dataAdapter,
						scrollmode : 'logical',
						editable: true,
						pageable: false,
	            		                selectionmode: 'singlecell',
	            		                editmode: 'click',
						columns : phpColumns,
					});
				} 
			});
		});
	}

};

[Peter StoevKeymaster]

Hi ae50042,

As far as I see you bind to this Grid event within a click handler so every time you click, you bind and more times you click, more times bindingcomplete will be called. My suggestion is, bind once and create the Grid just once. When you need to update something, do not update everything, update only what you need to update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ae50042Participant]

Hi Peter,
I understand now!
Thanks for your quick replay, the problem in defining the grid once is that I can’t know before phpColumns, so first I get phpColumns and then I generate the grid. Could you provide just a quick excperpt of my code reworked please?

Best regards,
Giorgio.

[Author]

Posts