Help Please?
Trying to understand how to update the grid after editing or adding a row CRUD.
Using one of the demos as a base, made a few changes and added server side script to load data data from the server, and handle crud operations.
The data is passed to the server side (name value pairs) in $_REQUEST.
Never see the updated data or new row in the client side grid after the edit modal closes.
What do I need to do to update the grid after an addRow or Edit?
Below is the PHP and JS code snipets..
server side PHP code
<?PHP
//add del or modify a row in the database
…success
$output[‘status’] = true;
$output[‘message’] = ‘Row Updated’; //or ‘Added Row’, or ‘Deleted Row’ etc
echo json_encode( $output );
…error
$output[‘status’] = false;
$output[‘message’] = ‘Error Updating Row’; //or ‘Error Adding Row’, or ‘Error Deleting Row’ etc
echo json_encode( $output );
?>
JS code
$(document).ready(function () {
$(“#jqGrid”).jqGrid({
url: ‘data.json_crud.php?load=true’,
editurl: ‘data.json_crud.php’,
mtype: “POST”,
datatype: “json”,
colModel: [
{label: ‘Customer ID’, name: ‘CustomerID’, width: 75, key: true, editable: true, editrules : { required: true} },
{label: ‘Company Name’, name: ‘CompanyName’, width: 140, editable: true },
{label: ‘Phone’, name: ‘Phone’, width: 100, editable: true },
{label: ‘Postal Code’, name: ‘PostalCode’, width: 80, editable: true },
{label: ‘City’, name: ‘City’, width: 140, editable: true }
],
sortname: ‘CustomerID’,
sortorder : ‘asc’,
loadonce: true,
viewrecords: true,
width: 780,
height: 200,
rowNum: 10,
pager: “#jqGridPager”,
});$(‘#jqGrid’).navGrid(‘#jqGridPager’,
{ edit: true,
add: true,
del: true,
search: true,
refresh: false,
view: false,
position: “left”,
cloneToTop: false
},
{
editCaption: “The Edit Dialog”,
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: true,
mtype: POST,
afterSubmit: function( response, postdata ) {
var json = response.responseText;
var result = JSON.parse(json);
alert( ‘Status: ‘ + result.status + “\r\n” + ‘Message: ‘ + result.message + “\r\n” );
return [result.status,result.message,null];
},
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText;
}
},
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
},
{
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
});
});
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top