[kathylParticipant]

Thank you so much! It works like a charm – appreciate the help.

[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

[kathylParticipant]

unfortunately, all that does is display the text with <br /> in it…. Here is a sample:

<?xml version="1.0"?><br /><!DOCTYPE nmaprun><br /><?xml-stylesheet href="file:///usr/bin/../share/nmap/nmap.xsl" type="text/xsl"?><br /><!-- Nmap 6.47 scan initiated Fri Dec 11 19:17:30 2015 as: nmap -PN -T5 -oX test.xml -vv --top-ports 280 xxxx.com --><br /><nmaprun scanner="nmap" args="nmap -PN -T5 -oX test.com.xml -vv --top-ports 280 ........

And this is how I am calling it:

$("#jqxwindow").jqxWindow('open');      			
var response = '';                        
response += jqXHR.responseText;  
response = response.replace(/\r?\n/g, "<br  />");    
$('#windowContent').text(response);

[kathylParticipant]

Update: If I read JSON from a file, or a variable (see below), the data loads fine, so it must be how I am loading the data into the grid. Here is what worked:

var sampleJson = '[{"TotalRows":1,"Rows":[{"noteId":2,"deviceId":2,"note":"This note is localdata","dateOfNote":"5/\/12\/15"}]}]';
	
var notesWindowSource =
	{
		datatype: "json",              
		datafields: [
			{ name: 'noteId', type: 'string'}, 
			{ name: 'deviceId', type: 'string' },        
			{ name: 'note', type: 'string' },
			{ name: 'dateOfNote', type: 'string' }  
		],
		root: 'Rows',
	        localdata: sampleJson,
		editable: true,
		async: false,
		};

[kathylParticipant]

Sure Hristo. The above did not work – the jqxwindow displays, but same result – JSON data shows up in Firebug, but not in the window. Here is more code:

	/* notes stuff ********************/
	var notesWindowSource =
	{
		datatype: "json",              
		datafields: [
			{ name: 'noteId', type: 'string'}, 
			{ name: 'deviceId', type: 'string' },        
			{ name: 'note', type: 'string' },
			{ name: 'dateOfNote', type: 'string', }  
		],
//		id: 'deviceId',
		editable: true,
		cache: false,
       	/*addrow: function (rowid, rowdata, position, commit) {
            // synchronize with the server - send insert command
            // need to check if all cells are filled
			var data = "insert=true&" + $.param(rowdata);
			   $.ajax({
                    dataType: 'json',
                    url: 'processNotesData.php',
                    data: data,
					cache: false,
                    success: function (data, status, xhr) {
					   // insert command is executed.
						commit(true);
						$("notesGrid").trigger("reloadGrid");
					},
					error: function(jqXHR, textStatus, errorThrown)
					{
						commit(false);
					}
				});							
	    },*/
               deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
            		   var data = "delete=true&" + $.param({noteId: rowid});
            		   // need to check if all fields are filled in
				       $.ajax({
                            dataType: 'json',
                            url: 'processNotesData.php',
							cache: false,
                            data: data,
                            success: function (data, status, xhr) {
							   // delete command is executed.
							   commit(true);
							},
							error: function(jqXHR, textStatus, errorThrown)
							{
								commit(false);
							}
						});							
			   },
                updaterow: function (rowid, rowdata, commit) {
			        // synchronize with the server - send update command
            		   var data = "update=true&" + $.param(rowdata);
					      $.ajax({
                            dataType: 'json',
                            url: 'processNotesData.php',
							cache: false,
                            data: data,
                            success: function (data, status, xhr) {
							  // update command is executed.
						 	  commit(true);
							},
							error: function(jqXHR, textStatus, errorThrown)
							{
							  commit(false);
							}							
						});		
                }
           };
	    /* notesWindowSource */ 
	    
  var notesDataAdapter = new $.jqx.dataAdapter(notesWindowSource, {
			loadError: function(xhr, status, error)
			{
				alert("error is " + error);
			}
    });

var viewNotes = function(event) {
		var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
		var value = $("#jqxgrid").jqxGrid('getcellvalue', row, 'deviceId');	
		$.ajax({
			type: "GET",
			url: 'getNotesData.php',
			data: {deviceId: value },
			dataType: "json",
			success: function(data){  					
				$('#notesHeader').show();
				$("#notesWindow").jqxWindow('open');
				notesWindowSource.localdata=data;
				notesDataAdapter.dataBind();
				$('#notesGrid').jqxGrid('updatebounddata');
				},
		    error : function(status){
		        console.log(status);
		    }	
		});
	}	

[kathylParticipant]

Dimitar, Yes the customers are the parent grid and their orders in the nested grid. I think I have narrowed it down to the sorting function. The filter function seems to display the correct number of records. Below is my sorting code, direct from the phpdemos/sorting-filtering-paging demo. When I choose to sort by any field, I get a response of 6-8 records on the first page, then 6-8 on the second page, etc. This is instead of 10 records on each page. I can’t figure out what the issue is with the sorting.

$new_total_rows = 0;
$pagenum = \htmlspecialchars($_GET['pagenum']);
$pagesize = \htmlspecialchars($_GET['pagesize']);
$start = $pagenum * $pagesize;
$result = $mysqli->prepare($limitQuery);
$result->bind_param('ii', $start, $pagesize);

$filterquery = "";
if (isset($_GET['filterscount']))
	{
	$filterscount = \htmlspecialchars($_GET['filterscount']);
	if ($filterscount > 0)
		{
		$where = "  AND  (";
		$tmpdatafield = "";
		$tmpfilteroperator = "";
		$valuesPrep = "";
		$value = [];
		for ($i = 0; $i < $filterscount; $i++)
		{
			$filtervalue = \htmlspecialchars($_GET["filtervalue" . $i]);
			$filtercondition = \htmlspecialchars($_GET["filtercondition" . $i]);
			$filterdatafield = \htmlspecialchars($_GET["filterdatafield" . $i]);
			$filteroperator = \htmlspecialchars($_GET["filteroperator" . $i]);
			if ($tmpdatafield == "")
				{
				$tmpdatafield = $filterdatafield;
				}
			  else if ($tmpdatafield <> $filterdatafield)
				{
				$where.= ") AND (";
				}
			  else if ($tmpdatafield == $filterdatafield)
				{
				if ($tmpfilteroperator == 0)
					{
					$where.= " AND ";
					}
				  else $where.= " OR ";
				}
			// build the "WHERE" clause depending on the filter's condition, value and datafield.
			switch ($filtercondition)
			{
			case "CONTAINS":
				$condition = " LIKE ";
				$value[0][$i] = "%{$filtervalue}%";
				$values[] = & $value[0][$i];
				break;

			case "DOES_NOT_CONTAIN":
				$condition = " NOT LIKE ";
				$value[1][$i] = "%{$filtervalue}%";
				$values[] = & $value[1][$i];
				break;

			case "EQUAL":
				$condition = " = ";
				$value[2][$i] = $filtervalue;
				$values[] = & $value[2][$i];
				break;

			case "NOT_EQUAL":
				$condition = " <> ";
				$value[3][$i] = $filtervalue;
				$values[] = & $value[3][$i];
				break;

			case "GREATER_THAN":
				$condition = " > ";
				$value[4][$i] = $filtervalue;
				$values[] = & $value[4][$i];
				break;

			case "LESS_THAN":
				$condition = " < ";
				$value[5][$i] = $filtervalue;
				$values[] = & $value[5][$i];
				break;

			case "GREATER_THAN_OR_EQUAL":
				$condition = " >= ";
				$value[6][$i] = $filtervalue;
				$values[] = & $value[6][$i];
				break;

			case "LESS_THAN_OR_EQUAL":
				$condition = " <= ";
				$value[7][$i] = $filtervalue;
				$values[] = & $value[7][$i];
				break;

			case "STARTS_WITH":
				$condition = " LIKE ";
				$value[8][$i] = "{$filtervalue}%";
				$values[] = & $value[8][$i];
				break;

			case "ENDS_WITH":
				$condition = " LIKE ";
				$value[9][$i] = "%{$filtervalue}";
				$values[] = & $value[9][$i];
				break;

			case "NULL":
				$condition = " IS NULL ";
				$value[10][$i] = "%{$filtervalue}%";
				$values[] = & $value[10][$i];
				break;

			case "NOT_NULL":
				$condition = " IS NOT NULL ";
				$value[11][$i] = "%{$filtervalue}%";
				$values[] = & $value[11][$i];
				break;
			}
			
			$where.= " " . $filterdatafield . $condition . "? ";
			$valuesPrep = $valuesPrep . "s";
			if ($i == $filterscount - 1)
			{
				$where.= ")";
			}
			$tmpfilteroperator = $filteroperator;
			$tmpdatafield = $filterdatafield;
		}     //end for loop
		
		$filterquery.= $query . $where;

		$valuesPrep = $valuesPrep . "ii";
		$values[] = & $start;
		$values[] = & $pagesize;
		$query = $query . $where . " LIMIT ?, ?";
		$result = $mysqli->prepare($query);
		call_user_func_array(array($result,"bind_param") , array_merge(array($valuesPrep) , $values));
		}
	}  // end of filters
	
if (isset($_GET['sortdatafield']))
	{
	$sortfields = array(
		"Address",
		"ipNum",
		"specificNums",
		"Project",
		"Agent",
		"Area"
	);
	$sortfield = \htmlspecialchars($_GET['sortdatafield']);
	$sortorder = $_GET['sortorder'];
		
	if (($sortfield != NULL) && (in_array($sortfield, $sortfields)))
	{
	if ($sortorder != '')
		{
		if ($_GET['filterscount'] == 0)
			{
			 $query =  $query . " ORDER BY "  . $sortfield . " " . $sortorder . " LIMIT ?, ?";
			error_log("query is $query\n");
			 $result = $mysqli->prepare($query);
			$result->bind_param('ii', $start, $pagesize);
			}
		  else
			{
			$filterquery.= " ORDER BY " . $sortfield . " ". $sortorder . " LIMIT ?, ?";
			$query = $filterquery;
			$result = $mysqli->prepare($query);
			call_user_func_array(array($result,"bind_param") , array_merge(array($valuesPrep) , $values));
			}
		}
	}
	}  // end of sort

$result->execute();
$result->bind_result($id, $address, $ipnum, $specificNums, $project, $agent, $area, $rating );

$deviceData = null;

while ($result->fetch())
	{
	$deviceData[] = array(
		'customerId' => $id,
		'address' => $address,
		'ipNum' => $ipNum,
		'specificNums' => $specificNums,
		'project' => $project,
		'agent' => agent,
		'area' => $area,
		'rating' => $rating		
	);
	}
$result = $mysqli->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' => $deviceData
);
echo json_encode($data);

$result->close();
$mysqli->close();
?>

[kathylParticipant]

Also, do you see any reason why the first time I click on the link in a cell to open my jqxwindow, the window opens, but there is no data loaded? The window is also very, very tiny.

[kathylParticipant]

My mistake. I may not be conveying well what I am trying to do. I am trying to make the height adjust dynamically, so I won’t know what height to set the window to. Each file could be a very different size and there could be hundreds of files. Another way to say it is that I am trying to dynamically calculate the height of the div of the jqxwindow.

[kathylParticipant]

Unfortunately, even if I add a width to my iframe, it does not calculate the height correctly:

$("#jqxwindow").jqxWindow('setContent', '<iframe class="iframe-class" width="200" src="files/' + value + '"></iframe>');

In addition, the first time I click the link to load the jqxwindow, there is no content,and the window it very, very small. If I close the window and click the cell again, the window is opened with the correct content, but it still does not calculate the height correctly.

Incidentally, my iframe-class is set as follows:

.iframe-class {
	background-color: blue;
}

[Author]

Posts