Editable checkbox not updating value of row to server

[jerovicParticipant]

i am evaluating editable checkbox wherein i will update the checkbox and the same is sent to the server with php and mysql,i am able to achieve 3 state editable checkbox as per your examples,but the updated data is not reaching the server,i need to send the row values of checked row along with the status of checkbox,which is being stored in the table.
tried with lot of combinations,i even tried with cellvaluechanged event and i am getting the alert message but some how data is not getting passed to the server.

I am not sure where am i going wrong.Please advise me.

freq.php

<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=”jqwidgets/jquery-1.11.0.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.edit.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.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/gettheme.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var fdate = “<?php echo $fdate; ?>”;
var tdate = “<?php echo $tdate ; ?>”;
var rn = “<?php echo $rn ; ?>”;
var data = {};
var theme = ‘classic’;
var source ={
datatype: “json”,
datafields: [{ name: ‘track’,type: ‘boolean’ },{ name: ‘rn’ },{ name: ‘mo’ },{ name: ‘cb’ },{ name: ‘br’ },{ name: ‘if’ },{ name: ‘am’,type: ‘float’ },{ name: ‘bn’ },{ name: ‘co’ },],
url: ‘data_freq.php?fdate=’+fdate+’&tdate=’+tdate+’&rn=’+rn,
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’);
},
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
var data = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data_freq.php’,
data: data,
cache: false,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},
};

var dataadapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
height: 400,
width: 1024,
source: dataadapter,
editable: true,
groupable: true,
sortable: true,
pageable: true,
virtualmode: true,
//altrows: true,
//enabletooltips: true,
// selectionmode: ‘multiplecellsadvanced’,
rendergridrows: function () {
return dataadapter.records;
},
columns: [{ text: ‘Track’,datafield: ‘track’,threestatecheckbox: true, columntype: ‘checkbox’},
{ text: ‘Re’, editable: false, datafield: ‘rn’, width: 250 },
{ text: ‘Mo’, editable: false, datafield: ‘mo’, width: 250 },
{ text: ‘Ac #’, editable: false, datafield: ‘cb’, width: 180 },
{ text: ‘Br’, editable: false, datafield: ‘br’, width: 500 },
{ text: ‘IF’, editable: false, datafield: ‘if’, width: 120 },
{ text: ‘Am’,editable: false, datafield: ‘am’,width: 120,cellsalign: ‘right’},
{ text: ‘Be’,editable: false, datafield: ‘bn’, width: 200 },
{ text: ‘Co’, editable: false,datafield: ‘country’, width: 120}],
//groups: [‘mo’]
});
$(“#jqxgrid”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else {
$(“#jqxgrid”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});
$(“#updaterowbutton”).jqxButton({ theme: theme });
// update row.
$(“#updaterowbutton”).bind(‘click’, function () {
var datarow = generaterow();
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
$(“#jqxgrid”).jqxGrid(‘addrow’, id, datarow);
}
});

});
</script>

data_freq.php

<?php
#Include the connect.php file
include(‘db/db.php’);
#Connect to the database
//connection String
$connect = mysql_connect($db_host, $db_username, $db_password) or die(‘Could not connect: ‘ . mysql_error());
//select database
mysql_select_db($db_database, $connect);
//Select The database
$bool = mysql_select_db($db_database, $connect);
if ($bool === False){
print “can’t find $db_database”;
}

$fdate = $_GET[‘fdate’];
$tdate = $_GET[‘tdate’];
$rn = $_GET[‘rn’];

// get data and store in a json array
$pagenum = $_GET[‘pagenum’];
$pagesize = $_GET[‘pagesize’];
//$pagenum = ‘1’;
//$pagesize = ’25’;
$start = $pagenum * $pagesize;
$query = “SELECT SQL_CALC_FOUND_ROWS * FROM customers LIMIT $start, $pagesize”;
if (isset($_GET[‘sortdatafield’]))
{
$sortfield = $_GET[‘sortdatafield’];
$sortorder = $_GET[‘sortorder’];
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
$sql = “SELECT FOUND_ROWS() AS found_rows;”;
$rows = mysql_query($sql);
$rows = mysql_fetch_assoc($rows);
$total_rows = $rows[‘found_rows’];

if ($sortfield != NULL)
{

if ($sortorder == “desc”)
{
$query = “SELECT * FROM customers ORDER BY” . ” ” . $sortfield . ” DESC LIMIT $start, $pagesize”;
}
else if ($sortorder == “asc”)
{
$query = “SELECT * FROM customers ORDER BY” . ” ” . $sortfield . ” ASC LIMIT $start, $pagesize”;
}
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
}
}
else
{
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
$sql = “SELECT FOUND_ROWS() AS found_rows;”;
$rows = mysql_query($sql);
$rows = mysql_fetch_assoc($rows);
$total_rows = $rows[‘found_rows’];
}
// INSERT AND UPDATE

if (isset($_GET[‘insert’]))
{
// INSERT COMMAND
$insert_query = “REPLACE INTO tracking(id, name, mobile, email, empid, contacted_by, updated_by, created_on, updated_on, status, comments, track)
VALUES (”,'”.$_GET[‘rname’].”‘,'”.$_GET[‘mob’].”‘,”,”,”,”,NOW(),”,”,”,’1’)”;

$result = mysql_query($insert_query) or die(“SQL Error 1: ” . mysql_error());
echo $result;
}
/*else
if (isset($_GET[‘update’]))
{
// UPDATE COMMAND
$update_query = “UPDATE tracking SET email='”.$_GET[’email’].”‘,
contacted_by='”.$_GET[‘contacted_by’].”‘,
updated_by='”.$_GET[‘updated_by’].”‘,
updated_on=’NOW()’,
status='”.$_GET[‘status’].”‘,
comment='”.$_GET[‘comment’].”‘,
track='”.$_GET[‘track’].”‘ WHERE name='”.$_GET[‘rn’].”‘ and mobile='”.$_GET[‘mo’].”‘ “;
$result = mysql_query($update_query) or die(“SQL Error 1: ” . mysql_error());
echo $result;
}*/
else
{

$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$customers[] = array(
‘track’ => $row[‘track’],
‘rn’ => $row[‘rn’],
‘mo’ => $row[‘mo’],
‘cb’ => $row[‘cb’],
‘br’ => $row[‘br’],
‘if’ => $row[‘if’],
‘am’ => $row[‘am’],
‘bn’ => $row[‘bn’],
‘co’ => $row[‘co’]
);

}
$data[] = array(
‘TotalRows’ => $total_rows,
‘Rows’ => $customers
);
echo json_encode($data);
}
?>

[DimitarParticipant]

Hello jerovic,

The source updaterow callback function is automatically called when a cell value is updated and can be used to synchronise with the server. You can read more about it in the jqxGrid API Documentation, under source.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts