jQgrid filterToolbar fails with searchOnEnter

Question

I have an exposed web service that returns data in either JSON or XML. I've set up a JSP page and added in jQgrid. The data displays just fine, however when I try to filter the results with filterToolbar it fails. Firebug says " TypeError: jQuery.jgrid is undefined".

I've read pretty much every post on jQuery and jqGrid and I have no idea why I'm getting this error. I'm running hibernate and Spring MVC from an appfuse archetype. /services/api/vulnss will return either xml or json depending upon the type of request. Both json and XML populate the grid just fine and I'm able to sort and page through everything.

<html>
<head>


        <link href="/resources/css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
        <link href="/resources/css/ui.jqgrid-bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="/resources/css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet" type="text/css"/>





        <script type="text/javascript" src="/resources/js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="/resources/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="/resources/js/jquery.jqGrid.min.js"></script>

</head>

And the script section:

 <script type="text/javascript">

var $j = jQuery.noConflict(); (function( $j ) {

          $j().ready(function (){
                $j("#jqGrid").jqGrid({
                        url: '/services/api/vulns',
                        mtype: "GET",
                        //styleUI : 'Bootstrap',
                        datatype: "xml",
                        colModel: [
                            { label: 'idcveconfig', name: 'idcveconfig', key: true, width: 75 },
                            { label: 'cveid', name: 'cveid', width: 150 },
                            { label: 'product', name: 'product', width: 150 },
                            { label: 'version', name: 'version', width: 150 },
                            { label:'vendor', name: 'vendor', width: 150 },
                            { label:'vulnsummary', name: 'vulnsummary', width: 150 }
                            ],
                        viewrecords: true,
                        loadonce: true,
                        height: 250,
                        rowNum: 20,
                        gridview: true,
                        pager: "#jqGridPager",
                        caption: "LOading data from server at once",
                        xmlReader : { 
                           root: "List", 
                           row: "item", 
                           //page: "rows>page", 
                           //total: "rows>total", 
                           //records : "rows>records", 
                           repeatitems: false, 
                           //cell: "cell", 
                           //id: "[id]",
                           //userdata: "userdata",

                           } 


                    });
                $j("#jqGrid").filterToolbar({searchOnEnter : true});

                }); 
})( jQuery );

I opened dev tools with chrome and in console I swapped jQuery with $j and it returned fale. I'm not exactly sure what it is supposed to return, but the string 307 exists within the field "idcveconfig".

Which version of jqGrid and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7) you use? Could you change URLs for jqGrid to URLs to free jqGrid (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)) and verify whether the problem exist in free jqGrid too? If the problem exist, please provide the demo (with non-minimized `jquery.jqgrid.src.js`) which can be used to reproduce the problem. — Oleg, Mar 02 '16 at 06:28
I was using the latest from Guriddo, so 5.2. After switching to free jqGrid I saw a few UI things clear up and it worked better on chrome. But I still fail at the same spot. But the failure is a bit more clear. now it says "Uncaught TypeError: Cannot read property 'getAccessor' of undefined"(String(jQuery.jgrid.getAccessor(this,'idcveconfig')).toUpperCase().substr(0,3) == String("307").toUpperCase())" — Bobby King, Mar 02 '16 at 06:58
@BobbyKing: I can't reproduce the problem in free jqGrid. jqGrid need to use *global* `jQuery` in the current implementation, but it will be set in your code. Thus it could be some other problem, which could be found after you will provide the corresponding demo. — Oleg, Mar 02 '16 at 10:00
For a working demo, if you just change the url to "https://dl.dropboxusercontent.com/u/403504183/vulns.xml" it retrieves the same xml dataset with the same results. — Bobby King, Mar 02 '16 at 16:40

Oleg · Answer 1 · 2016-03-02T09:57:34.203

0

The current implementation of filtering uses global jqGrid. It can't use $j which you set in noConflict(). I'd recommend you to include

<script type="text/javascript">
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
</script>

before jquery.jqGrid.min.js and to use only the style of usage jqGrid methods only in the form $j("#jqGrid").jqGrid("filterToolbar", {searchOnEnter: true}); instead of $j("#jqGrid").filterToolbar({searchOnEnter: true});. It reduces possible conflicts. Additionally you should do set global jQuery variable (like window.jQuery = $j;).

UPDATED: I examined your code more exactly and it seems to me that you should have no problems with the usage of filterToolbar. You current code still set global jQuery variable, which need be used by jqGrid. I tried to use very close code with free jqGrid and had no problems. I think that the demo, which you could prepare could clear everything.

edited Mar 02 '16 at 09:57

answered Mar 02 '16 at 08:01

Oleg

220,925
34
403
798

I tried this as well... just in case. I got the same result. "Uncaught TypeError: Cannot read property 'getAccessor' of undefined" – Bobby King Mar 02 '16 at 17:22
@BobbyKing: [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/noConflict-vulns.htm) uses your code and I see no problem. I use free jqGrid 4.13.0 – Oleg Mar 02 '16 at 18:06
thanks! That helps. Even after copy/pasting your code I still get the error, which tells me there is some kind of conflict within my webapp. I'm using an Appfuse archetype running Spring MVC and Hibernate. I thought that by wrapping everything in a function and replacing the $ with $j it would avoid conflicts, especially with the .noConflict turned on. – Bobby King Mar 02 '16 at 18:42
@BobbyKing: You are welcome! I made some [small modifications](https://github.com/free-jqgrid/jqGrid/commit/dc6dab40993a33df911cd99c15af9f285e7b157f) of free jqGrid and posted there to GitHub. Now free jqGrid can works full isolated without requirement to have any global `jQuery` variable. I don't full understand your problems with Spring MVC, but if you would prepare the online demo, which I could debug (which uses non-minimized `jquery.jqGrid.src.js` of free jqGrid), I could help you to find the reason. – Oleg Mar 02 '16 at 19:48
I'm getting it narrowed down. I'm using velocity which adds a few other JSPs and scripts around the page. When I exclude THIS page from them it works just fine. So the problem is with these decorator JSPs conflicting with jQuery, even though noConflict has been called. I'm on the hunt for the JSP that calls jQuery first and putting it into nonConflict mode as the documentation says to put the first one called into noConflict mode. – Bobby King Mar 02 '16 at 20:11
@BobbyKing: Sorry, but I can only repeat: I can try to help you if you would provides online demo, which demonstrates the problem. I can gives your more information only if I could debug the demo. – Oleg Mar 02 '16 at 20:15

score 0 · Accepted Answer · answered Mar 02 '16 at 20:45

Shout out to @Oleg for getting me pointed in the right direction!

Here's the full scenario for those who might be using the same setup. I created a webapp using the Appfuse.org Appfuse Spring MVC and hibernate archetype. This framework comes with a ton of additional features that help make this app run pretty smooth, but the documentation doesn't really talk about all of the features that are included.

Appfuse includes a Web Resource Optimizer that loads a bunch of scripts, I'm assuming to improve performance. This WRO creates a script file called "main.js" and this file is a combination of whatever scripts are loaded into WRO.XML. When main.js is loaded it overwrites your local/protected variables and it created a conflict with the jquery I was loading.

I removed jquery from WRO.xml and EUREKA!!!! it works! My next steps are to try moving my jqgrid scripts to WRO.xml and see if that works too.

jQgrid filterToolbar fails with searchOnEnter

2 Answers2