How reload data jqGrid when user change Data with custom popup Form
i'm starter in jqgrid. i write this code for load jqgrid data and create some icon Button for show custom panel papup for insert and update.
$(function () {
$("#txtFullName").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoCompleteHandler.ashx",
dataType: "json",
data: {
term: request.term,
Person: 1
},
contentType: "application/json",
converters: {
"json json": function (msg) {
return msg.hasOwnProperty('d') ? msg.d : msg;
}
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Label,
value: item.Value,
id: item.Id
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1,
change: function (event, ui) { $("#PersonId").val(ui.item.id); }
});
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
editurl: 'jQGridHandler.ashx',
postData: { ActionPage: 'SecurityUser', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
pgtext: "صفحه {0} از {1}",
datatype: 'json',
height: 490,
colNames: ['کد کاربری', 'شماره پرسنلی', 'مدیر؟', 'نام کاربری ', 'رمز عبور', 'قفل؟', 'تاریخ ایجاد', ],
colModel: [
{ name: 'USER_ID', width: 100, sortable: true, hidden: true },
{ name: 'PERSON_ID', width: 200, sortable: true },
{ name: 'USER_TYPE', width: 100, sortable: true, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'USER_NAME', width: 100, sortable: true },
{ name: 'USER_PASSWORD', width: 100, sortable: true },
{ name: 'USER_LOCK', width: 50, sortable: true, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'CREATE_DATE', width: 30, sortable: true, hidden: true },
],
gridview: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'USER_ID',
viewrecords: true,
sortorder: 'ASC',
caption: 'درخواست ها......',
rownumbers: true
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true }, {}, {},
{ url: "JQGridHandler.ashx?ActionPage=SecurityUser&Action=Delete", reloadAfterSubmit: false }, { multipleSearch: true, overlay: false, width: 460 })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function () {
$("#PersonId").val('');
$("#chkAdmin").attr("checked", 'false');
$("#txtUserName").val('');
$("#txtPassword").val('');
$("#chkActive").attr("checked", 'false');
$("#hdnUserId").val('');
$("#btnUpdate").css("display", 'none');
$("#btnAdd").css("display", 'inline');
$("#POPUP1").dialog({ width: 730 });
},
position: "first"
})
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon ui-icon-pencil",
onClickButton: function () {
$("#PersonId").val('');
$("#chkAdmin").attr("checked", 'false');
$("#txtUserName").val('');
$("#txtPassword").val('');
$("#chkActive").attr("checked", 'false');
$("#hdnUserId").val('');
var myGrid = grid;
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
$("#PersonId").val(myGrid.jqGrid('getCell', selRowId, 'PERSON_ID'));
$("#chkAdmin").attr("checked", myGrid.jqGrid('getCell', selRowId, 'USER_TYPE'));
$("#txtUserName").val(myGrid.jqGrid('getCell', selRowId, 'USER_NAME'));
$("#txtPassword").val(myGrid.jqGrid('getCell', selRowId, 'USER_PASSWORD'));
$("#chkActive").attr("checked", myGrid.jqGrid('getCell', selRowId, 'USER_LOCK'));
$("#btnAdd").css("display", 'none');
$("#btnUpdate").css("display", 'inline');
$("#hdnUserId").val(myGrid.jqGrid('getCell', selRowId, 'USER_ID'));
$("#POPUP").dialog({ width: 400 });
},
position: "first"
});
function add() {
$.ajax({
url: 'JQGridHandler.ashx',
contentType: "application/json; charset=utf-8",
data: { PERSON_ID: $("#PersonId").val(), USER_TYPE: $("#chkAdmin").is(":checked"),
USER_NAME: $("#txtUserName").val(), USER_PASSWORD: $("#txtPassword").val(),
USER_LOCK: $("#chkActive").is(":checked"), ActionPage: 'SecurityUser', Action: 'Insert'
},
dataType: "json",
success: function (data) {
$("#list").trigger("reloadGrid", [{ current: true}]); ??????
}
});
}
function update() {
$.ajax({
url: 'JQGridHandler.ashx',
contentType: "application/json; charset=utf-8",
data: { USER_ID: $("#hdnUserId").val(), PERSON_ID: $("#PersonId").val(), USER_TYPE: $("#chkAdmin").is(":checked"),
USER_NAME: $("#txtUserName").val(), USER_PASSWORD: $("#txtPassword").val(),
USER_LOCK: $("#chkActive").is(":checked"), ActionPage: 'SecurityUser', Action: 'Update'
},
dataType: "json",
success: function (data) { }
});
}
$("#btnAdd").click(function () {
add();
//$("#list").jqGrid("reloadGrid");
});
$("#btnUpdate").click(function () {
update();
});
});
and html form For create jqGrid and popup panel
<div>
<table id="list">
</table>
<div id="pager">
</div>
<div id="POPUP" dir="rtl">
<table width="100%" class="tbl">
<tr>
<td>
FullName
</td>
<td>
<input type="text" id="txtFullName" />
</td>
</tr>
<tr>
<td>
PersonId
</td>
<td>
<input type="text" id="PersonId" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkAdmin" />IsAdmin?
</td>
</tr>
<tr>
<td>
UserName
</td>
<td>
<input type="text" id="txtUserName" />
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" id="txtPassword" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkActive" checked="checked" />IsActive
</td>
</tr>
<tr>
<td colspan="2">
<input id="btnAdd" type="button" value="Add" />
<input id="btnUpdate" type="button" value="Edit" />
<br />
<input id="hdnUserId" type="hidden" />
</td>
</tr>
</table>
</div>
</div>
i want when user click in btnAdd and record insert in database jqGrid data reload(I want refresh jqGrid data). but i get 2 errors
Error: no element found
Source File: http://localhost:1041/Clerance_New/JQGridHandler.ashx?PERSON_ID=1001&USER_TYPE=false&USER_NAME=tttt&USER_PASSWORD=tttt&USER_LOCK=true&ActionPage=SecurityUser&Action=Insert
Line: 1
and
Error: uncaught exception: jqGrid - No such method: reloadGrid
and for reload in ?????? line not run server side code in handler, I do not know why.
please help me. thanks all
Answer
I am not sure why you wrote relatively complex code instead of usage standard form editing, but it should be sure some important reason.
The code
$("#list"). $("#list").jqGrid("reloadGrid");
is definitively wrong. The correct code you have commented for some reason
$("#list").trigger("reloadGrid", [{current: true}]);
Moreover it's important to place the call inside of success callback of the corresponding $.ajax request inside of add or update functions which you use.
UPDATED: I've seen now that you used loadonce: true option. It means that the data will be loaded from the server once. After the first loading the value of datatype will be changed to 'local'. The next reload of the grid will be done locally. If you need to reload the data one more time from the server you have to reset datatype to it's initial value ('json' in your case) and only then reload the grid. See the answer for details.