refresh json data grid on click

[ae50042Participant]

Hi I have a problem with jqxGrid, When I press the submit button, the grid is correctly refresh with new data and everything appear good, but I still have this 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.

How can I fix that? Below is my code:

jQuery(document).ready(function() {

	lang = jQuery("#lang").val();

	jQuery.get("../../media/system/labels_inth/lang.php", {
		"lang" : lang,
		"mode" : 2
	}, 
	function(data, success) {
		labels = JSON.parse(data);
		main_function(labels);
	});

});
				
function main_function(labels){

	id_dispositivo = jQuery("#id_dispositivo").val();
	jQuery("#lb_id_disp").prop("innerHTML", id_dispositivo);
	type_date = "D";

	if (!id_dispositivo) {
		alert("ID Dispositivo == NULL !!");
		id_dispositivo = 1;
	}
	
	jQuery("#jqxTabs").jqxTabs({
		width : '90%',
		height : '600px',
		position : 'top'
	});
	
	jQuery("#jqxcheckbox").jqxCheckBox({width : 120});
	
	var dataFields = [
	  { name: 'utc',   map:'can>utc',   type:'date'},
	  { name: 'local', map:'can>local', type:'date'},
	  { 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'},
	  { name: 'note',  map:'can>note'}
	];

	var source = {
		datatype : "json",
		datafields : dataFields,
		id : 'Data',
		root : 'dati',
		updaterow: function (rowid, rowdata, commit) {
			var year = rowdata.local.getFullYear();
			var month = rowdata.local.getMonth() + 1;
			var day = rowdata.local.getDate();
			var hours = rowdata.local.getHours();
			var minutes=rowdata.local.getMinutes();
			var seconds = rowdata.local.getSeconds();
			var date = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds ;
			
	        jQuery.ajax({
	            dataType: 'json',
	            url: url_get,
	            data: "type=update&id_disp=" + id_dispositivo + "&local=" + date + "&note=" + rowdata.note,
	            success: function (data, status, xhr) {alert("SI");commit(true);},
	            error: function (data, status, xhr) {alert("NO");commit(false);}
	        });
	    }
	};

	var dataAdapter = new jQuery.jqx.dataAdapter(source);
	
	jQuery("#jqxgrid").on('bindingcomplete', function(event) {
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "utc", 'hidden', true);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'width', 140);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'editable', false);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch01", 'editable', false);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch02", 'editable', false);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch03", 'editable', false);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch04", 'editable', false);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch05", 'editable', false);
				jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch06", 'editable', false);
	});
	
	jQuery("#jqxgrid").jqxGrid({
		width : "98%",
		height : "520",
		autoHeight : false,
		source : dataAdapter,
		scrollmode : 'logical',
		editable: true,
		pageable: false,
		selectionmode: 'singlecell',
		editmode: 'click'
	});

	
	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"]);
		
		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() {
		createGrid(source);
	});		
};

function createGrid(source){
	            
	    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;

			phpColumns.push({"text":"Note","dataField":"note"});
			phpColumns.forEach(function(column){
  				if(column.text=="pH" || column.text=="RX")
  				  column.width=50;
  				if(column.text=="Temp" || column.text=="Cl tot")
  				  column.width=60;
  				if(column.text=="Cl comb")
  				  column.width=80;
			});

			phpColumns.forEach(function(colum) {
				if (colum.cellsrenderer == "coloraCelle")
					colum.cellsrenderer = coloraCelle;
				if (colum.dataField == "utc" || colum.dataField == "local") {
					colum.text = labels["COL_" + colum.dataField];
					colum.cellsformat = date_string_format;
				}
				if (colum.cellsrenderer == "coloraCelle_DI")
					colum.cellsrenderer = coloraCelle_DI;

			});
					
			if (jQuery('#jqxTabs').jqxTabs('selectedItem') == 0) {
				source.url = url_get_new;
				var dataAdapter = new jQuery.jqx.dataAdapter(source);
                jQuery("#jqxgrid").jqxGrid({ source: dataAdapter });
				jQuery("#jqxgrid").jqxGrid({ columns: phpColumns});
			} 
		});
}

[HristoParticipant]

Hello ae50042,

It looks like server-side error. This error can be thrown when server-side processing is enabled and you are trying to initiate one operation (sorting/filtering) before another (sorting/filtering) has been completed.
The bindingcomplete event allows you to register when the first operation has been completed so that you can start another.
Also this is one big data source code and it is difficult to check.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts