JQuery jqGrid trigger reloadGrid

Question

I use jqGrid to display search results. When the search button is pressed, it does the following:

$("#Search").jqGrid('setGridParam', { url: url }).trigger("reloadGrid"); 

Where url contains search parameters, for example:

 var url ="/search?first=joe&last=smith" 

The web server receives this URL and responds accordingly. But on the client side, it throws this error in the jqgrid.min.js 21 line:

 Syntax error: }); b.fn.jqGrid = function(f) { 

What can I do to fix this? I use jqGrid successfully in many other places, but this is the only one where I change the url and reload.

Answer 1

Try using the non-minified version on this page to learn more about why it surrounds. What you see where parsing stops; I suspect your mistake is even greater. This way you can see if the current URL is being used and what throws it away.

Answer 2

It seems to me that the error you have in jqgrid.min.js corresponds to the error in the uncompressed version of jqGrid direct at the beginning of .jqGrid('setGridParam', { url: url }) (see line 82 grid.base.js ) . This is part of the so-called "new API" introduced in version 3.6 for jqGrid. The code snippet began with the following lines:

 $.fn.jqGrid = function( pin ) { if (typeof pin == 'string') { var fn = $.fn.jqGrid[pin]; if (!fn) { throw ("jqGrid - No such method: " + pin); } var args = $.makeArray(arguments).slice(1); return fn.apply(this,args); } //... 

I am not sure why you have a “syntax error”, I recommend that you check that the grid identifier is indeed “Search”. If you do not find a mistake, add more information to your question. For example: what version of jQuery are you using? Including code snippets and loading order of JavaScripts will also be helpful.

Answer 3

Instead of setting a URL, you should try something like this.

I use this for custom dropdowns that I add to the grid. Basicaly I conditionally add 2 drop-down lists to the top of the toolbar for quick searches.

 var toolbarspan = $("<span>"); if (tblDef.State != null) { $("<label>").attr("for", "selectState").append(" State: ").appendTo("#t_colch") $("<select>").attr("id", "selectState") .append($("<option>").attr({selected: true, value: "O"}).append("Open")) .append($("<option>").attr("value", "C").append("Closed")) .append($("<option>").attr("value", "B").append("Both")) .change(selChange) .appendTo("#t_colch") } $("<label>").attr("for", "selectInActive").append(" InActive: ").appendTo("#t_colch") $("<select>").attr("id", "selectInActive") .append($("<option>").attr({selected: true, value: "0"}).append("Active")) .append($("<option>").attr("value", "1").append("InActive")) .append($("<option>").attr("value", "B").append("Both")) .change(selChange) .appendTo("#t_colch"); } 

If you need your 2 fields on the top toolbar, you need to add the following parameters to the table.

  toolbar: [true, "top"], 

First add this to the table definition.

 beforeRequest: myBeforeRequest(this), 

Then define the function myBeforeRequest something like this.

 function myBeforeRequest(grid) { $(grid).jqGrid("setPostDataItem", "InActive", 0); var chkVal=""; if ($("#selectInActive").length > 0) { chkVal = $("#selectInActive").val(); if (chkVal == "B") $(grid).jqGrid("removePostDataItem", "InActive"); else $(grid).jqGrid("setPostDataItem", "InActive", chkVal); } if (tblDef.State != null) { $(grid).jqGrid("setPostDataItem", "StateCol", tblDef.State); $(grid).jqGrid("setPostDataItem", "State", "O"); if($("#selectState").length > 0) { chkVal = $("#selectState").val(); if (chkVal == "B") $(grid).jqGrid("removePostDataItem", "State"); else $(grid).jqGrid("setPostDataItem", "State", chkVal); } } } 

You can do the same for the two search fields, even clearing them of the parameters if they are empty. This will result in the same URL that you are manually editing now. GetRecords.aspx? InActive = 0 & State = O & StateCol = 9 is what I am currently getting on the server.

Answer 4

The update method works Good for me. This refreshes the dates (from and to) in every call.

The last two lines of code do all the magic.

I use it as follows:

 function refreshGrid() { var gridSel = "#analyticsTbl"; var fromDt = jQuery('#dpFrom').datepicker().val(); var toDt = jQuery('#dpTo').val(); var url = 'myService.asmx/MyWebMethod?fromdt=' + fromDt + '&' + 'todt=' + toDt; jQuery(gridSel).jqGrid({ url: url, mtype: "GET", datatype: "xml", colNames: ['Product', 'Group', 'Score', 'Date'], colModel: [ { name: 'Product', index: 'Product', sortable: true }, { name: 'Group', index: 'Group', sortable: true }, { name: 'Score', index: 'Score', sortable: true }, { name: 'Date', index: 'Date', sortable: true } ], viewrecords: true, sortorder: "desc", caption: "Report", hidegrid: false, autowidth: true, height: "100%" }); jQuery(gridSel).jqGrid('navGrid', '#pgwidth', { edit: false, add: false, del: false }); jQuery(gridSel).jqGrid('setGridParam', { url: url }); jQuery(gridSel).trigger("reloadGrid"); }