Process search form & display grid

[kathylParticipant]

I’m sure this is an easy answer and I’m making it more complicated than it should be. I have a basic HTML5 form with submit button. The form action is “processSearch.php”. In “processSearch.php” I grab the form data, query the mysql db and echo the json data.

How do I display this returned data? I understand how to format the jqxgrid, etc., but I’d like to use “processSearch.php” as an intermediate point (I like to keep separate files for action and display). How do I call for instance, a “results.php” which would be a file with a <div> with grid to display this data?

[HristoParticipant]

Hello kathyl,

I am not absolutely what you do but if you want to display the returned data you should choose the suitable type.
Please, take a look at this section about the DataAdapter:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm#demos/jqxdataadapter/defaultfunctionality.htm

Also, I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/loadfromtable.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[kathylParticipant]

Sorry, I should have posted code. I am very close – my search results are displayed on the top of my results page, with a blank grid below. Here is what I have:

A search form with this line:
<form class="form" action="results.php" method="post">

In results.php, I set up the div to display the data:
`<div class=”collapse show” id=”showSummary”>
<div id=”summaryGrid”></div>
</div>`

At the bottom of results.php, I include:
<script src="js/results.js"></script>

Results.js consists of setting up the grid:

var source =
	{
		datatype: "json",              
		datafields: [
			{ name: 'name', type: 'string' },        
			{ name: 'ipAddr', type: 'string' },
			{ name: 'os', type: 'string', },
			{ name: 'item', type: 'string'},			
			{ name: 'make', type: 'string' },
			{ name: 'model', type: 'string' },									
		],
		id: 'name', 
		type: "GET",
	};   /* end source */

		var summaryDataAdapter = new $.jqx.dataAdapter(source, {
			loadError: function(xhr, status, error)
			{
				alert("error is " + error);
			}
		});  

        // initialize jqxGrid
        $("#summaryGrid").jqxGrid(
        {		
				source: summaryDataAdapter,
				columnsresize: true,
				theme: theme,
				width: '95%',
				autoheight: true,
/*				rendergridrows: function(obj)
				{
					return obj.data; 
				},*/
				columns: [        
	         { text: 'Name', datafield: 'name',  width: '15%', renderer: columnHeader, cellsrenderer: centerCells},
	         { text: 'IP Address', datafield: 'ipAddress', width: '15%', renderer: columnHeader, cellsrenderer: centerCells},
	         { text: 'OS', datafield: 'os', width: '20%', renderer: columnHeader, cellsrenderer: centerCells},                              
	         { text: 'Item', datafield: 'item',  width: '10%', renderer: columnHeader, cellsrenderer: centerCells},
	         { text: 'Make', datafield: 'make', width: '5%', renderer: columnHeader, cellsrenderer: centerCells },
	         { text: 'Model', datafield: 'model', width: '5%', renderer: columnHeader, cellsrenderer: centerCells}              
		]
		});  
});

My processSearch.php does the mysql query and returns the data in json format:

<?php 
	require_once('include/connect.php');
	mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); // transfer mysql errors into php exceptions
	$countQuery = "SELECT SQL_CALC_FOUND_ROWS name, ipAddress, os, item, make, model from workstations";
	$name = isset($_POST['name']) ? $_POST['name'] : "";
	$new_total_rows = 0;
	$pagenum = isset($_POST['pagenum']) ? $_POST['pagenum'] : "0";
	$pagesize = isset($_POST['pagesize']) ? $_POST['pagesize'] : "20";
	$start = $pagenum * $pagesize;
	$where = " WHERE name = '".$name."' ";
	
	$query = $countQuery . $where . " LIMIT ?,? ";
	$result = $conn->prepare($query);
	$result->bind_param('ii', $start, $pagesize);	

	$result->execute();
	$result->bind_result($id, $name, $ipAddress, $os, $item, $make, $model);

	$devices = null;

	while ($result->fetch())
	{
		$devices[] = array(
			'name' => $name,
			'ipAddress' => $ipAddress,
			'os' => $os,
			'item' => $item,
			'make' => $make,
			'model' => $model
		);
	}
	
	$result = $conn->prepare("SELECT FOUND_ROWS()");
	$result->execute();
	$result->bind_result($total_rows);
	$result->fetch();

	if ($new_total_rows > 0) $total_rows = $new_total_rows;
	$data[] = array(
		'TotalRows' => $total_rows,
		'Rows' => $devices
	);
	echo json_encode($data);

	$result->close();
	$conn->close();	

?>

As mentioned above, the query comes back with the right data, but does not display it in the grid. It splats it above (due to the echo json_encode($data); in my file – if I comment that out, I don’t see any results). If I check in the Web Dev part of Firefox, I see the parameters going out correctly (I put in a name I know is in the database), but the Response tab does not show the returning json data. Can you pinpoint where I went wrong? Thanks

[HristoParticipant]

Hello kathyl,

I did not see in your example where you set the url into your “source”.
Try with something like this:

var source =
{
	datatype: "json",              
	datafields: [
		{ name: 'name', type: 'string' },        
		{ name: 'ipAddr', type: 'string' },
		{ name: 'os', type: 'string', },
		{ name: 'item', type: 'string'},			
		{ name: 'make', type: 'string' },
		{ name: 'model', type: 'string' },									
	],
	id: 'name', 
	type: "GET",
	url: './processSearch.php',
	beforeprocessing: function(data)
	{		
		source.totalrecords = data[0].TotalRows;
	}
};

Also, you implement “rendergridrows” callback but it becomes in combination with virtualmode property. You should implement it, too.
Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts