jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid updaterow ends in no server side update
Tagged: ajax, angular grid, CRUD, data, error, grid, jquery grid, jqxgrid, server, server-side, updaterow
This topic contains 8 replies, has 2 voices, and was last updated by Dimitar 9 years, 11 months ago.
-
Author
-
The following grid is set editable in the $scope.gridSettings and the updaterow function is included in the source definition.
The grid is then edited, but the edited cells are not updated at the server.
Grid code is the following:
<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<title id=”Description”>jqxGrid Binding to JSON using AngularJS</title>
<link rel=”stylesheet” type=”text/css” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../jqwidgets/scripts/angular.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.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/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxradiobutton.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/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxangular.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript”>
var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
demoApp.controller(“demoController”, function ($scope, $http) {
$scope.createWidget = false;
$http({
method: ‘get’,
url: ‘../../concrete/themes/elemental/domains/grid_data.php’
}).success(function (data, status) {
var source = {
datatype: “json”,
datafields: [
{ name: ‘Code’},
{ name: ‘Name’}
],
id: ‘Code’,
localdata: data,
addrow: function (rowid, rowdata, position, commit) {
commit(true);
},
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
deleterow: function (rowid, commit) {
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$scope.gridSettings = {
width: 500,
source: dataAdapter,
columnsresize: true,
editable: true,
filterable: true,
showfilterrow: true,
sortable: true,
columns: [
{ text: ‘Code’, filtertype: ‘input’, datafield: ‘Code’, width: 250 },
{ text: ‘Name’, filtertype: ‘input’, datafield: ‘Name’, width: 250 }
]
};
$scope.createWidget = true;
}).error(function (data, status) {
// Some error occurred
});
});
</script>
</head>
<body ng-controller=”demoController”>
<jqx-grid jqx-create=”createWidget” jqx-settings=”gridSettings”></jqx-grid>
</body>
</html>Hello Ivalde,
commit(true)is not enough for your server-side to be updated. For a complete example, please check the Build CRUD Web App with jqxGrid using PHP and MySQL tutorial.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/From that CRUD Web App tutorial I have now managed to let the edited cells be updated server side also.
Thanks for the tip!
I did belive the dataAdapter did the auto insert, auto update and auto delete. Is it planned to let the dataAdapter do that in the next versions? So that we do not need to include all these functions per jqxGrid?
For the PHP SQL queries file in general, do we need to include one such file per widget? Or is it possible to let the SQL queries for all the widgets be placed in a single PHP file?
Hi Ivalde,
This functionality cannot be made automatic, because each user’s scenario differs from the others. It is up to you to implement the addrow, updaterow and deleterow callbacks. As for the PHP file – if multiple widgets are loaded from and/or update the same table from the database, you probably can use the same PHP file.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/For this CRUD based grid I have now included a button for a new row to be inserted, which then calls this function:
$(“#addrowbutton”).bind(‘click’, function () {
var row = {};
$(“#jqxgrid”).jqxGrid(‘addrow’, null, row);
$(“#jqxgrid”).jqxGrid(‘refreshdata’);
});This mechanism results in a new empty row inserted both client side and server side.
For the new row data to be inserted (updated) however (ie. updaterow), the grid has to be complete refreshed (F5) before the data can be inserted client side and then catched server side.
The $(“#jqxgrid”).jqxGrid(‘refreshdata’); was then inserted in the above code for the grid to be refreshed, with no success. The refresh method and the updatebounddata method results in no success either. These methods was then run in a button call, for a refresh button to be called just after the new row inserted, with no success. When data is inserted client side, it’s not cathed server side. The F5 refresh fix it all.
Is the dataAdapter usage the reason for the missing refresh?
Please note the server side table has an auto incremental Id column.
I believe this can make the challenge, as that Id for the new row has to be bound client side before the new client side inserted data can then be catched server side.
Hello Ivalde,
- Please make sure you call
commit(true)in the success callback of the Ajax call made in addrow/updaterow. This will ensure the client-side grid is updated as well. - In the following topic is discussed how to address this issue: http://www.jqwidgets.com/community/topic/insert-row-id-if-row-id-is-relied-on-auto-increment/.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the tip on how to receive the server side auto incremental Id.
The addrow function does now operate as expected.
For the grid data insertion, update and delete operations in general, I would now like to receive the possible server side MySQL failure message, to let the client side user know from a popup message then what’s going wrong server side.
For the addrow function and the success function, I have included the commit(true, data.Id); and for the error function, I have included commit(false);
For the grid data operation, I have the following code as an example for the data insertion:
if (isset($_GET[‘insert’])) {
$insert_query = “INSERT INTO stbl_Domains (Domain) SELECT (”)”;
$result = mysql_query($insert_query) or die(“SQL Error 1: ” . mysql_error());
if ($result) {
echo json_encode(array(‘Id’ => mysql_insert_id()));
}
}How to let that possible server side mysql_error() be included in the callback and presented in a client side popup?
Hi Ivalde,
I think your question is answered in the following Stack Overflow topic: http://stackoverflow.com/questions/9066790/jquery-ajax-how-to-get-response-data-in-error.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ - Please make sure you call
-
AuthorPosts
You must be logged in to reply to this topic.