delete row index 0-9 not working on jqxgrid crud with php and mysql

[deniferliyansahParticipant]

hello, im deni ferliyansah
i want to ask about my problems,
my code is :
JS
<script type=”text/javascript”>
$(document).ready(function () {
var data = {};
var theme = ‘metro’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘EmployeeID’, type: ‘string’},
{ name: ‘FirstName’, type: ‘string’},
{ name: ‘LastName’, type: ‘string’},
{ name: ‘Title’, type: ‘string’},
{ name: ‘Address’, type: ‘string’},
{ name: ‘City’, type: ‘string’},
{ name: ‘Region’, type: ‘string’},
{ name: ‘Country’, type: ‘string’}

],
cache: false,
id: ‘EmployeeID’,
url: ‘data.php’,
root: ‘Rows’,
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&FirstName=” + rowdata.FirstName + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title + “&Address=” + rowdata.Address + “&City=” + rowdata.City + “&Region=” + rowdata.Region + “&Country=” + rowdata.Country ;

data = data + “&EmployeeID=” + rowid;
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
type: ‘POST’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
var data = “delete=true&” + $.param({EmployeeID: rowid}) ;

$.ajax({
dataType: ‘json’,
url: ‘data.php’,
type: ‘POST’,
cache: false,
data: data,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
}

};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize the input fields.
$(“#firstName”).jqxInput({width: 150, height: 23});
$(“#lastName”).jqxInput({width: 150, height: 23});
$(“#title”).jqxInput({width: 150, height: 23});
$(“#address”).jqxInput({width: 150, height: 23});
$(“#city”).jqxInput({width: 150, height: 23});
$(“#region”).jqxInput({width: 150, height: 23});
$(“#country”).jqxInput({width: 150, height: 23});

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
var delrow;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1099,
source: dataAdapter,
theme:theme,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
{ text: ‘First Name’, columntype: ‘dropdownlist’, datafield: ‘FirstName’, width: 100 },
{ text: ‘Last Name’, columntype: ‘dropdownlist’, datafield: ‘LastName’, width: 100 },
{ text: ‘Title’, datafield: ‘Title’, width: 180 },
{ text: ‘Address’, datafield: ‘Address’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 180 },
{ text: ‘Region’, datafield: ‘Region’, width: 180 },
{ text: ‘Country’, datafield: ‘Country’, width: 180 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, pinned:true, width: 100, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.FirstName);
$(“#lastName”).val(dataRecord.LastName);
$(“#title”).val(dataRecord.Title);
$(“#address”).val(dataRecord.Address);
$(“#city”).val(dataRecord.City);
$(“#region”).val(dataRecord.Region);
$(“#country”).val(dataRecord.Country);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
},
{ text: ‘Hapus’, datafield: ‘Hapus’, columntype: ‘button’, pinned:true, width: 100, cellsrenderer: function () {
return “Hapus”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
delrow = $(“#jqxgrid”).jqxGrid(‘getrowid’,row);
var offset = $(“#jqxgrid”).offset();
$(“#popupdelete”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

// show the popup window.
$(“#popupdelete”).jqxWindow(‘open’);
}

}
]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 280, resizable: true, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.06
});

$(“#popupdelete”).jqxWindow({
width: 280, resizable: true, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.06
});

$(“#Cancel”).jqxButton();
$(“#Save”).jqxButton();
$(“#Delete”).jqxButton();

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { FirstName: $(“#firstName”).val(), LastName: $(“#lastName”).val(), Title: $(“#title”).val(), Address: $(“#address”).val(), City: $(“#city”).val(), Region: $(“#region”).val(), Country: $(“#country”).val()};

var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘close’);
}
});

// delete row.
$(“#Delete”).click(function () {
$(‘#jqxgrid’).jqxGrid(‘deleterow’, delrow);
$(“#popupdelete”).jqxWindow(‘close’);
});

});
</script>

and data.php :
<?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”;
}

if (isset($_POST[‘update’]))
{
// UPDATE COMMAND
$update_query = “UPDATE Employees SET FirstName='”.mysql_real_escape_string($_POST[‘FirstName’]).”‘,
LastName='”.mysql_real_escape_string($_POST[‘LastName’]).”‘,
Title='”.mysql_real_escape_string($_POST[‘Title’]).”‘,
Address='”.mysql_real_escape_string($_POST[‘Address’]).”‘,
City='”.mysql_real_escape_string($_POST[‘City’]).”‘,
Region='”.mysql_real_escape_string($_POST[‘Region’]).”‘,
Country='”.mysql_real_escape_string($_POST[‘Country’]).”‘ WHERE EmployeeID='”.mysql_real_escape_string($_POST[‘EmployeeID’]).”‘”;
$result = mysql_query($update_query) or die(“SQL Error 1: ” .
mysql_error());
echo $result;
}
else if (isset($_POST[‘delete’]))
{
// DELETE COMMAND
$delete_query = “DELETE FROM employees WHERE EmployeeID='”.mysql_real_escape_string($_POST[‘EmployeeID’]).”‘”;
$result = mysql_query($delete_query) or die(“SQL Error 1: ” . mysql_error());
echo $result;
}

else
{
$pagenum = $_GET[‘pagenum’];
$pagesize = $_GET[‘pagesize’];
$start = $pagenum * $pagesize;
$query = “SELECT SQL_CALC_FOUND_ROWS * FROM Employees LIMIT $start, $pagesize”;

$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’];

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$employees[] = array(
‘EmployeeID’ => $row[‘EmployeeID’],
‘FirstName’ => $row[‘FirstName’],
‘LastName’ => $row[‘LastName’],
‘Title’ => $row[‘Title’],
‘Address’ => $row[‘Address’],
‘City’ => $row[‘City’],
‘Region’ => $row[‘Region’],
‘Country’ => $row[‘Country’]
);
}

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

this code work correctly when im delete data on the grid, after rowid 0-9 only,
for rowid 0-9 on the grid this code not working for me
please help me to fix this problems
thanks

[DimitarParticipant]

Hello deniferliyansah,

Please try calling updatebounddata after commit(true); in the success callback of the deleterow Ajax call:

deleterow: function(rowid, commit) {
    // synchronize with the server – send delete command
    var data = "delete=true&" + $.param({
        EmployeeID: rowid
    });

    $.ajax({
        dataType: 'json',
        url: 'data.php',
        type: 'POST',
        cache: false,
        data: data,
        success: function(data, status, xhr) {
            // delete command is executed.
            commit(true);
            $('#jqxgrid').jqxGrid('updatebounddata');
        },
        error: function(jqXHR, textStatus, errorThrown) {
            commit(false);
        }
    });
}

Alternatively, after making the $delete_query in your PHP, echo a selection of the updated data.

Best Regards,
Dimitar

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

[Author]

Posts