jqueryjqgridappfuse

jQgrid filterToolbar fails with searchOnEnter

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".

enter image description here

Solution

  • 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.