Permanently loading state icon if [{"TotalRows":"0","Rows":null}]

[magostoniParticipant]

Actually I have a web page with jqxGrid inside.

I’m loading some data by JSON from PHP and all works good if I get some records.
On the other side, if php controller get no records, I have this situation

1) json data is [{“TotalRows”:”0″,”Rows”:null}]

2) browser console give me this error: Uncaught Error: jqxDataAdapter: JSON Parse error! Invalid JSON. Please, check your JSON or your jqxDataAdapter initialization!

3) the grid continue is empty and continue to show the “loading state” icon

I’m not sure what I need to modify

		// prepare the data
		var theme = 'bootstrap';
		var source =
		{
			datatype: "json",
			datafields: [
				 { name: 'id' },
				 { name: 'bonus' },
				 { name: 'operation_date' },
				 { name: 'value' },
				 { name: 'name' },
				 { name: 'surname' },
				 { name: 'receipt' },
                 { name: 'transaction_id'}
			],
			url: '<?php echo site_url('/purchase_history/get_purchased/').'/'.$this->session->userdata('front_session')['log_user_id']?>',
			root: 'Rows',
			beforeprocessing: function (data) {
				source.totalrecords = data[0].TotalRows;
			},
			sort: function () {
				// update the grid and send a request to the server.
				$("#jqxgrid").jqxGrid('updatebounddata','sort');
			}
		};
		var dataadapter = new $.jqx.dataAdapter(source);

        // funzioni per formattazione header e contenuto delle colonne
        var cellsrenderer = function (row, column, value) {
            return '<div style="text-align: right; margin-top: 4px; margin-right: 5px;">' + value + '</div>';
        }
        var columnrenderer = function (value) {
            return '<div style="text-align: right; margin-top: 4px; margin-right: 5px;">' + value + '</div>';
        }

		// initialize jqxGrid		
		var imagerenderer = function (row, datafield, value, defaultHtml)
		{
			if(value == '')
			{
				return '<img style="margin-left: 5px; display:none;" height="22" width="22" src="' + value + '"/>';
			}
			else
			{
				return '<span style="float:left; width:100%; height:100%; background:#91D8D8"> <img style="margin: 3px 3px 3px 5px;" height="18" width="18" src="' + value + '"/> </span>';
			}
			
		}
		
		$("#jqxgrid").jqxGrid(
		{
			width: '50%',
			source: dataadapter,
			theme: theme,
			autoheight: true,
			pageable: true,
			virtualmode: true,
			sortable: true,
			columns: [
				/*{ text: '<?php echo($scritte['gridcolumns_id']) ?>', datafield: 'id', width: '10%', cellclassname: cellclassname  },*/
				  { text: '<?php echo 'Bonus'; ?>', datafield: 'bonus', width: '20%', cellsrenderer: imagerenderer,menu: false,sortable:false	 },
				  { text: '<?php echo($scritte['gridcolumns_date']) ?>', datafield: 'operation_date', width: '25%', cellclassname: cellclassname  },
				  { text: '<?php echo($scritte['gridcolumns_value']) ?>', datafield: 'value', width: '25%', cellclassname: cellclassname, cellsalign: 'right' },
				  { text: '<?php echo($scritte['gridcolumns_name']) ?>', datafield: 'name', width: '20%', cellclassname: cellclassname, hidden: true },
				  { text: '<?php echo($scritte['gridcolumns_surname']) ?>', datafield: 'surname', width: '20%', cellclassname: cellclassname, hidden: true  },
				  { text: '<?php echo($scritte['gridcolumns_receipt']) ?>', datafield: 'receipt', width: '15%', cellclassname: cellclassname, hidden: true  },
                  { text: '<?php echo($scritte['gridcolumns_transactionid']) ?>', datafield: 'transaction_id', width: '30%', cellclassname: cellclassname  }
			  ]
		});

[jsmckeeParticipant]

Hi,
Your easiest solution would be to simply pass in an empty array rather than a null, as: [{“TotalRows”:”0″,”Rows”:[]}], which should prevent the exception.

[magostoniParticipant]

Yeah, it works

thanks a lot

[Author]

Posts