Can't get grid to refresh - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: database, edit, grid, jqxgrid, new, record, refresh, row, source, update

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Can't get grid to refresh Posts
May 21, 2014 at 4:41 am Can't get grid to refresh #54715

harryb1965
Participant

I am new to JQWidgets and I am trying to embellish the popup demo for Grid, but I cannot get grid to refresh after I have added or edited row.

Not sure what I am doing wrong. I can add a row from popup and save to Mysql, but will not refresh display once done.

!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example demostrates how we can manipulate data at client side. The Grid plugin provides you callback functions when you add, remove or update a row.
</title>
<link rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.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/jqxdata.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/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”/scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

var initialiserow = function () {
var row = {};

row[“ID”] = “”;
row[“Aim_Desc”] = “”;

return row;
}

var source =
{
datatype: “json”,
datafields: [
{ name: ‘ID’, type: ‘string’ },
{ name: ‘Description’, type: ‘string’ }
],
ID: ‘ID’,
url: ‘/Sail/AimList.php’,
addrow: function (rowid, rowdata, position, commit) {

},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
},
updaterow: function (rowid, newdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 650,
height: 500,
source: dataAdapter,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
container.append(‘<input style=”margin-left: 5px;” id=”deleterowbutton” type=”button” value=”Delete Selected Row” />’);
container.append(‘<input style=”margin-left: 5px;” id=”updaterowbutton” type=”button” value=”Update Selected Row” />’);
$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();
// update row.
$(“#updaterowbutton”).on(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, selectedrowindex);
$(“#ID”).val(dataRecord.ID);
$(“#Aim_Desc”).val(dataRecord.Description);
// open the popup window when the user clicks a button.
var offset = $(“#jqxgrid”).offset();
$(“#editpopupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked rows data and initialize the input fields.

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

$(“#jqxgrid”).jqxGrid(‘ensurerowvisible’, selectedrowindex);
}
});
// create new row.
$(“#addrowbutton”).on(‘click’, function () {
// open the popup window when the user clicks a button.
var datarow = initialiserow();
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
$(“#jqxgrid”).jqxGrid(‘updaterow’, id, datarow);
}
var offset = $(“#jqxgrid”).offset();
$(“#addpopupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked rows data and initialize the input fields.

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

});
// delete row.
$(“#deleterowbutton”).on(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#jqxgrid”).jqxGrid(‘deleterow’, id);
}
});
},
columns: [
{ text: ‘ID’, datafield: ‘ID’, width: 50 },
{ text: ‘Description’, datafield: ‘Description’, width: 400 }

]
});
// initialize the popup window and buttons.
$(“#addpopupWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.01
});
// initialize the popup window and buttons.
$(“#editpopupWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.01
});

$(“#addSave”).jqxButton({ theme: theme });
$(“#editSave”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
$(“#addSave”).click(function () {
$(“#jqxgrid”).jqxGrid(‘beginupdate’);
$.ajax({
type: “POST”,
url: “/Sail/AimList.php”,
data: { type: “ADD”, ID: document.getElementById(“ID”).value, Aim_Desc: document.getElementById(“Aim_Desc”).value },
dataType:’JSON’,
success: function(response){
alert(response.statusMessage);
},
error: function(response){
alert(response.statusMessage);
}
});
$(“#jqxgrid”).jqxGrid(‘endupdate’);

$(“#addpopupWindow”).jqxWindow(‘hide’);
});
$(“#editSave”).click(function () {

$(“#jqxgrid”).jqxGrid(‘beginupdate’);
$.ajax({
type: “POST”,
url: “/Sail/AimList.php”,
data: { type: “EDIT”, ID: document.getElementById(“ID”).value, Aim_Desc: document.getElementById(“Aim_Desc”).value },
dataType:’JSON’,
success: function(response){
alert(response.statusMessage);

}
});
datarow = {};
datarow[‘ID’] = document.getElementById(“ID”);
datarow[‘Description’] = document.getElementById(“Aim_Desc”);
var commit = $(“#jqxgrid”).jqxGrid(‘updaterow’, id, datarow);
$(“#jqxgrid”).jqxGrid(‘endupdate’);
$(“#editpopupWindow”).jqxWindow(‘hide’);
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
<div id=”addpopupWindow”>
<div>Add Aim</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>ID:</td>
<td align=”left”><input id=”ID” name=”ID” type=”text” maxlength=”1″ value=””/></td>
</tr>
<tr>
<td align=”right”>Description:</td>
<td align=”left”><input id=”Aim_Desc” name=”Aim_Desc” type=”text” maxlength=”40″ value=”” /></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”addSave” value=”Save” /></td>
</tr>
</table>
</div>
</div>
<div id=”editpopupWindow”>
<div>Edit Aim</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>Description:</td>
<td align=”left”><input id=”Aim_Desc” name=”Aim_Desc” type=”text” maxlength=”40″/></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”editSave” value=”Save” /></td>
</tr>
</table>
</div>
</div>
</body>
</html>

May 21, 2014 at 6:57 am Can't get grid to refresh #54732
Dimitar
Participant
Hello harryb1965,

Please try this way:
```
$("#addSave").click(function () {
    $.ajax({
        type: "POST",
        url: "/Sail/AimList.php",
        data: {
            type: "ADD",
            ID: document.getElementById("ID").value,
            Aim_Desc: document.getElementById("Aim_Desc").value
        },
        dataType: 'JSON',
        success: function (response) {
            alert(response.statusMessage);
        },
        error: function (response) {
            alert(response.statusMessage);
        }
    });
    $("#jqxgrid").jqxGrid('updatebounddata');

    $("#addpopupWindow").jqxWindow('hide');
});
```
Also note that you have two inputs with the same id (Aim_Desc) and this may cause issues. Ids of HTML elements must always have unique values.

Best Regards,
Dimitar

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

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.