I am working on my first implementation of a jqGrid. I am using the standard add/edit buttons that appear in the navGrid but am having problems identifying how process the server response when I click Submit in the edit/add forms.
.navGrid("#product-codes-footer",{edit:true,add:true,del:false},
{afterShowForm:afterShowEdit}, {afterShowForm:afterShowAdd} );
Is there a standard callback or event parameter I am missing somewhere regarding this? Is there a way to define how saveRow
is called or is there a default success/error callback method I can implement?
Any direction would be much appreciated!!!
There appears to be a couple event parameters that I failed to completely read and comprehend...
API --> http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow
using the event parameters for afterSubmit and afterComplete allow me to process the server response and update the form.
--Dan
EDIT
Here is an example of the code used...
.navGrid(
"#product-codes-footer",
{edit:true,add:true,del:false},
{
afterShowForm:afterShowEdit,
afterSubmit:processAddEdit,
beforeSubmit:validateData,
closeAfterAdd: true,
closeAfterEdit: true
},
{
afterShowForm:afterShowAdd,
afterSubmit:processAddEdit,
beforeSubmit:validateData,
closeAfterAdd: true,
closeAfterEdit: true
}
);
function afterShowEdit(formId) {
//do stuff after the form is rendered
}
function afterShowAdd(formId) {
//do stuff after the form is rendered
}
function processAddEdit(response, postdata) {
var success = true;
var message = ""
var json = eval('(' + response.responseText + ')');
if(json.errors) {
success = false;
for(i=0; i < json.errors.length; i++) {
message += json.errors[i] + '<br/>';
}
}
var new_id = "1";
return [success,message,new_id];
}
There are a few ways I have seen to do this:
jQuery("#search_results").jqGrid({
url: host,
datatype: "xml",
mtype: "GET", // Handy to see the params passed.
height: 200,
width: 500,
...
...
etc
gridComplete: function() {
var ids = jQuery("#search_results").getDataIDs();
if (ids.length Empty Result');
}
else {
$('#jqgrid_error').hide();
}
},
loadError: function(xhr,st,err) {
jQuery("#jqgrid_error").html("Type: "+
st +"; Response: "+ xhr.status + " "+xhr.statusText+'');
}
}).navGrid('#search_results_pager',
{edit:true,add:false,del:false,search:true},
{
afterComplete:processed, // processed is a function you define
closeAfterEdit: true,
reloadAfterSubmit:true
}
);
From the documentation:
afterComplete
This event fires immediately after all actions and events are completed
and the row is inserted or updated in the grid.
afterComplete(serverResponse, postdata, formid) where
- response is the data returned from the server (if any)
- postdata an array, is the data sent to the server
- formid is the id of the form
gridComplete
This fires after all the data is loaded into the grid and all other
processes are complete.
loadError xhr,st,err
A function to be called if the request fails. The function gets passed
three arguments: The XMLHttpRequest object (XHR), a string
describing the type of error (st) that occurred and an optional
exception object (err), if one occurred.
There is a handy/helpful PDF documents (a little dated):
http://www.scribd.com/doc/17094846/jqGrid.
You could try this:
navGrid('#gridpager',{view:true},{},{closeOnEscape:true},{afterSubmit:processAddEdit});
$.jgrid.search={
odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','like','does not contain'],
sopt:['eq','ne','cn','bw','ew']
}