[akshayyesParticipant]

Hello Peter,
How to ADD – ServerFiltering – along with – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

Please reply. Thanks

[akshayyesParticipant]

Hello Peter,
I am able to add the Photo image upload functionality successfully.
thanks.

[akshayyesParticipant]

How to ADD the – FILTER code – {http://www.jqwidgets.com/jquery-widgets-demo/demos/php/index.htm?%28arctic%29?%28arctic%29#demos/php/serverfiltering.htm} IN http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

[akshayyesParticipant]

I have myself removed the UPDATE command in the above post.

Now, I am using your code to run a test. It is run successfully when used as it is.
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

When I added the FILTER command in your file (data.php), Then your code stops working.
I also added – Filter.js – in index.html file.
jqxGrid – Filterable Properties – is set TRUE.

Please inform to me what is wrong with what I am doing ??

—— FILTER CODE —–

else if (isset($_GET['filterscount']))
	{
		$filterscount = $_GET['filterscount'];
		
		if ($filterscount > 0)
		{
			$where = " WHERE (";
			$tmpdatafield = "";
			$tmpfilteroperator = "";
			for ($i=0; $i < $filterscount; $i++)
		    {
				// get the filter's value.
				$filtervalue = $_GET["filtervalue" . $i];
				// get the filter's condition.
				$filtercondition = $_GET["filtercondition" . $i];
				// get the filter's column.
				$filterdatafield = $_GET["filterdatafield" . $i];
				// get the filter's operator.
				$filteroperator = $_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 "NOT_EMPTY":
					case "NOT_NULL":
						$where .= " " . $filterdatafield . " NOT LIKE '" . "" ."'";
						break;
					case "EMPTY":
					case "NULL":
						$where .= " " . $filterdatafield . " LIKE '" . "" ."'";
						break;
					case "CONTAINS_CASE_SENSITIVE":
						$where .= " BINARY  " . $filterdatafield . " LIKE '%" . $filtervalue ."%'";
						break;
					case "CONTAINS":
						$where .= " " . $filterdatafield . " LIKE '%" . $filtervalue ."%'";
						break;
					case "DOES_NOT_CONTAIN_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " NOT LIKE '%" . $filtervalue ."%'";
						break;
					case "DOES_NOT_CONTAIN":
						$where .= " " . $filterdatafield . " NOT LIKE '%" . $filtervalue ."%'";
						break;
					case "EQUAL_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " = '" . $filtervalue ."'";
						break;
					case "EQUAL":
						$where .= " " . $filterdatafield . " = '" . $filtervalue ."'";
						break;
					case "NOT_EQUAL_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " <> '" . $filtervalue ."'";
						break;
					case "NOT_EQUAL":
						$where .= " " . $filterdatafield . " <> '" . $filtervalue ."'";
						break;
					case "GREATER_THAN":
						$where .= " " . $filterdatafield . " > '" . $filtervalue ."'";
						break;
					case "LESS_THAN":
						$where .= " " . $filterdatafield . " < '" . $filtervalue ."'";
						break;
					case "GREATER_THAN_OR_EQUAL":
						$where .= " " . $filterdatafield . " >= '" . $filtervalue ."'";
						break;
					case "LESS_THAN_OR_EQUAL":
						$where .= " " . $filterdatafield . " <= '" . $filtervalue ."'";
						break;
					case "STARTS_WITH_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " LIKE '" . $filtervalue ."%'";
						break;
					case "STARTS_WITH":
						$where .= " " . $filterdatafield . " LIKE '" . $filtervalue ."%'";
						break;
					case "ENDS_WITH_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " LIKE '%" . $filtervalue ."'";
						break;
					case "ENDS_WITH":
						$where .= " " . $filterdatafield . " LIKE '%" . $filtervalue ."'";
						break;
				}
								
				if ($i == $filterscount - 1)
				{
					$where .= ")";
				}
				
				$tmpfilteroperator = $filteroperator;
				$tmpdatafield = $filterdatafield;			
			}
			// build the query.
			$query = "SELECT * FROM employees" . $where;			
		}
	}

[akshayyesParticipant]

Peter,
I am only trying to apply the code in reference URL provided by you. If you can only guide me how the code in Reference URL is to be added in jqxGrid index.html file. I am not able to correctly ADD the AJAX function of Reference URL – [http://www.vasplus.info/18.html#.UssAy_QW19s] in a particular column of jqxGrid.

thanks,
Akshayyes

[akshayyesParticipant]

I am not able to ADD an AJAX function in a particular column of jqxGrid
Reference URL – http://www.vasplus.info/18.html#.UssAy_QW19s

#1

In – HTML Code, How to add a custom <input type=”file” —- in index.html of jqxGrid
[ From Reference URL ] <input type=”file” name=”vasPhoto_uploads”

#2

[ From Reference URL ] In – Ajax and Jquery, where to add THIS FUNCTION (Below)……..

$(‘#vasPhoto_uploads’).live(‘change’, function() {
$(“#vasPLUS_Programming_Blog_Form”).vPB({
beforeSubmit: function() {

……..within this code in jqxGrid

<script type=”text/javascript”>
$(document).ready(function() {

[akshayyesParticipant]

Peter,
I am having problem in applying the custom (reference post: http://www.vasplus.info/18.html#.UssAy_QW19s) code in jqxGrid (index.html). Please inform where to apply the Referred Post Code within jqxGrid.

Question 1 :-

In – HTML Code (section), How to add a custom <input type=”file” —- in index.html of jqxGrid
<input type=”file” name=”vasPhoto_uploads”

Question 2 :-

In – Ajax and Jquery (section) , where to add the function

$(‘#vasPhoto_uploads’).live(‘change’, function() {
$(“#vasPLUS_Programming_Blog_Form”).vPB({
beforeSubmit: function() {

within

<script type=”text/javascript”>
$(document).ready(function() {

[akshayyesParticipant]

Hello Peter,
(a) Insert the Name of Photo/Image into MySQL Database Table.
(b) Upload the actual Photo/Image file into a Folder on the Server.

What I asking is about (a). The Name of Photo/Image (peterstoev.jpg) is not inserted into MySQL Database Table. At the same time – all the other Columns (except Photo/Image Name) is updated/edited successfully.

The code I am implementing is given below.
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&brand=” + rowdata.brand + “&part_no=” + rowdata.part_no + “&photo=” + rowdata.photo;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1200,
height: 350,
selectionmode: ‘singlecell’,
source: source,
theme: theme,
editable: true,
columns:
[
{ text: ‘id’, datafield: ‘id’, width: 100 },
{ text: ‘Brand’, columntype: ‘dropdownlist’, datafield: ‘brand’, width: 100 },
{ text: ‘Part No’, columntype: ‘dropdownlist’, datafield: ‘part_no’, width: 100 },
{
text: ‘Upload’, width: 250, columntype: ‘custom’, datafield: ‘photo’,
cellsrenderer: function (row, column, value) {
if (value == “”) {
return “Select a file”;
};
},
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.html(‘<input id=”fileInput’ + row + ‘” type=”file” name=”fileInput” />’);
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
var value = $(“#fileInput” + row).val();
//return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
}
}

]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function () {
// cancel changes.
commit(false);
}
});
}

[akshayyesParticipant]

Hello Dimitar,
I have tried to make it work, but it is not done. I have spend several hours in past 2 days. Please get me the code to do the following :-

Step 1 – Click on Browse Button in JqxGrid
Step 2 – Pick/Upload the Photo image File (dimitar.jpg)
Step 3 – Add/Insert the File Name (dimitar.jpg) into mySQL database table

Waiting for your reply. Thanks.

[akshayyesParticipant]

Dimitar,
I have applied your method (suggested by you) but data (File Name) is not updated in my MySQL database table. Please also check the PHP file code I submitted earlier. Waiting for your reply. Thanks.

[akshayyesParticipant]

+++++++++++++ and this is PHP CODE +++++++++++++++
<?php
#Include the connect.php file
include(‘connect.php’);
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysql_error());
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print “can’t find $database”;
}
// get data and store in a json array
$query = “SELECT * FROM beyond_lcdpanel”;
if (isset($_GET[‘update’]))
{

//$target = “../image/” ;
//$target = $target . basename( $_FILES[‘fileInput’][‘name’]);
// UPDATE COMMAND
$update_query = “UPDATE beyond_lcdpanel SET brand='”.$_GET[‘brand’].”‘,
part_no='”.$_GET[‘part_no’].”‘,
size='”.$_GET[‘size’].”‘,
resolution='”.$_GET[‘resolution’].”‘,
aspect_ratio='”.$_GET[‘aspect_ratio’].”‘,
contrast_ratio='”.$_GET[‘contrast_ratio’].”‘,
brightness='”.$_GET[‘brightness’].”‘,
production_status= ‘”.$_GET[‘production_status’].”‘,
outline_dimension= ‘”.$_GET[‘outline_dimension’].”‘,
outline_dimension= ‘”.$_GET[‘outline_dimension’].”‘ WHERE id='”.$_GET[‘id’].”‘”;
//photo= ‘”.$_GET[‘photo’].”‘ WHERE id='”.$_GET[‘id’].”‘”;
//photo='”.$_FILES[‘fileInput’][‘name’].”‘ WHERE id='”.$_GET[‘id’].”‘”;
$result = mysql_query($update_query) or die(“SQL Error 1: ” . mysql_error());
// move_uploaded_file($_FILES[‘fileInput’][‘tmp_name’], $target);
echo $result;

}

else
{
// SELECT COMMAND
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$beyond[] = array(
‘id’=>$row[‘id’],
‘brand’ => $row[‘brand’],
‘part_no’ =>$row[‘part_no’],
‘size’ => $row[‘size’],
‘resolution’ => $row[‘resolution’],
‘aspect_ratio’ => $row[‘aspect_ratio’],
‘contrast_ratio’ => $row[‘contrast_ratio’],
‘brightness’ => $row[‘brightness’],
‘outline_dimension’ => $row[‘outline_dimension’],
‘production_status’ => $row[‘production_status’],
‘photo’ => $row[‘photo’]

);

}

echo json_encode($beyond);
}
?>

[akshayyesParticipant]

# I am not able to BIND – rowdata of image in updaterow: / update command. Other remaining data is updated excluding the Image/Photo column.
# As a result, the name & extension of (file name) photo image is not inserted into mysql database table.

+++++ CODE BELOW ++++++

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”../scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = {};
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘brand’ },
{ name: ‘part_no’ },
{ name: ‘size’ },
{ name: ‘resolution’ },
{ name: ‘aspect_ratio’ },
{ name: ‘contrast_ratio’ },
{ name: ‘brightness’ },
{ name: ‘outline_dimension’ },
{ name: ‘production_status’ },
{ name: ‘photo’ }

],

id: ‘id’,
url: ‘data.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&brand=” + rowdata.brand + “&part_no=” + rowdata.part_no + “&size=” + rowdata.size;
data = data + “&resolution=” + rowdata.resolution + “&aspect_ratio=” + rowdata.aspect_ratio + “&contrast_ratio=” + rowdata.contrast_ratio ;
data = data + “&brightness=” + rowdata.brightness + “&outline_dimension=” + rowdata.outline_dimension + “&id=” + rowdata.id;
data = data + “&production_status=” + rowdata.production_status;

$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function () {
// cancel changes.
commit(false);
}
});
}

};

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1200,
height: 350,
selectionmode: ‘singlecell’,
source: source,
theme: theme,
editable: true,
columns:
[
{ text: ‘id’, datafield: ‘id’, width: 100 },
{ text: ‘Brand’, columntype: ‘dropdownlist’, datafield: ‘brand’, width: 100 },
{ text: ‘Part No’, columntype: ‘dropdownlist’, datafield: ‘part_no’, width: 100 },
{ text: ‘Size’, datafield: ‘size’, width: 180 },
{ text: ‘Resolution’, datafield: ‘resolution’, width: 180 },
{ text: ‘AspectRatio’, datafield: ‘aspect_ratio’, width: 100 },
{ text: ‘ContrastRatio’, datafield: ‘contrast_ratio’, width: 140 },
{ text: ‘Brightness’, datafield: ‘brightness’, width: 140 },
{ text: ‘OutlineDimension’, datafield: ‘outline_dimension’, width: 140 },
{ text: ‘production_status’, datafield: ‘production_status’, width: 140,columntype: ‘checkbox’},
{
text: ‘Upload’, width: 250, columntype: ‘custom’, datafield: ‘photo’,
cellsrenderer: function (row, column, value) {
if (value == “”) {
return “Select a file”;
};
},
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.html(‘<input id=”fileInput’ + row + ‘” type=”file” name=”fileInput” />’);
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
var value = $(“#fileInput” + row).val();
//return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
}
}

]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>

[Author]

Posts