jqGrid 'url' parameter causes errors in pages in deeper URLs

Question

I'm trying to deploy an ASP.NET MVC site to a Windows 2003, IIS 6.0 server with the 3.5 framework installed (but not ASP.NET MVC - it's just in the bin folder). The site makes use of jqGrid, but on the deployment server the grid is failing in certain cases.

The web site's master page is at /Views/Shared/Site.Master. It has a script tag to include the JavaScript to initialize and load a jqGrid.

I found that when I deployed, neither the JavaScript "/" nor the ASP "~" forced the path to the script files to absolute paths. I needed to add some code to ensure the path was complete:

<script type="text/javascript" src=<%= VirtualPathUtility.ToAbsolute("~/Scripts/searchControls.js") %> ></script>

The url in the jqGrid initialize function includes the path to the controller method to get the initial data, like this:

jQuery("#searchResultList").jqGrid({
        url: './Report.mvc/GetResultsL2E/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['', 'ID', 'Title', 'Post_Date', 'Start_Date', 'End_Date', 'Summary', 'Categories', 'Affected Places'],
    colModel: [
      { name: 'act', index: 'act', width: 75, sortable: false },
      { name: 'ID', index: 'ID', width: 40, align: 'left', hidden: true },
      { name: 'Title', index: 'Title', width: 150, align: 'left' },
      { name: 'Post_Date', index: 'Post_Date', width: 80, align: 'left' }, //, formatter: 'date' },
      { name: 'Start_Date', index: 'Start_Date', width: 80, align: 'left' }, //, formatter: 'date' },
      { name: 'End_Date', index: 'End_Date', width: 80, align: 'left' }, //, formatter: 'date' },
      { name: 'Summary', index: 'Summary', width: 240, align: 'left' },
      { name: 'Categories', index: 'Categories', width: 140, align: 'left' },
      { name: 'Affected Places', index: 'AffectedPlaces', width: 140, align: 'left' }
    ],
    pager: jQuery('#searchResultPager'),
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'Title',
    sortorder: 'asc',
    imgpath: './Scripts/jqGrid/themes/green/images',
    caption: 'Report Search Results',
    editurl: './Report.mvc/Edit/',
    height: 'auto',
    multiselect: true,
    multiboxonly: true, //adds check box column
    viewrecords: true,
    recordtext: ' Reports',
    pgtext: ' of ',
    altRows: true,
    loadComplete: function() {
        var ids = jQuery("#searchResultList").getDataIDs();
        for (var i = 0; i < ids.length; i++) {
            var cl = ids[i];
            be = "<a href='./Report.mvc/Edit/" + cl + "' title='Edit'><img src='./Content/Images/Icons/Edit.png' border='0' alt='Edit' /></a>";
            se = "<a href='./Report.mvc/Details/" + cl + "' title='View'><img src='./Content/Images/Icons/view.png' border='0' alt='View' /></a>";
            ce = "<a href='./Report.mvc/Delete/" + cl + "' title='Delete'><img src='./Content/Images/Icons/delete.png' border='0' alt='Delete' /></a>";
            jQuery("#searchResultList").setRowData(ids[i], { act: be + se + ce })
        }
    }
}).navGrid('#searchResultPager',
{ edit: false, add: false, del: false, search: false }, //options 
{ height: 280, reloadAfterSubmit: false }, // edit options 
{ height: 280, reloadAfterSubmit: false }, // add options 
{ reloadAfterSubmit: false }, // del options 
{} // search options 
);

I also found that I had to add the dot to make this work on the IIS 6 server, but it does work.

The problem is that I have links in the 'act' column to navigate to an edit page. The edit page uses the same master page, and therefore the same scripts. However, the URL to the page is /MyWebApp/Report.mvc/Edit/# (where # is the ID of the report to edit). And the jqGrid will not initialize.

In Firebug console I see the error:

jQuery("#searchResultList").jqGrid is not a function

           loadComplete: function() {\r\n

which I'm pretty sure is bogus, because the only variation I can see is that the URL is now one level deeper (/Report.mvc/Edit vs. /Report.mvc).

There are a number of quirky things on this network and as a contractor I have no control over them, and not much more control over the server.

I'm thinking this is a problem with jqGrid's handling of the URL, because I tried to set the url parameter to the following values:

http://server_name/MyWebApp/Report.mvc/GetResultsL2E/  and
/MyWebApp/Report.mvc/GetResultsL2E/

Both raised script errors on all pages, referring to s.data or s.url not being a function in the jQuery.js script.

Does anyone have any hints on how to make this work in my deployment environment?

UPDATE: I long ago worked around this problem, but now i find out that the test server that has had these weird quirks is a virtual server. I'm looking to find out if that has any bearing on this and other issues on this particular network.

Answer 1

"jqGrid is not a function means that the grid.base.js file hasn't been loaded, which means jQuery.jqGrid.js either wasn't loaded before your call to .jqGrid or failed. Look at the Net panel in Firebug. grid.base.js must load before this call.

It's not the grid's URL handling, because you don't have a grid yet if you see this error.

Answer 2

You have to edit this file: JQuery.JQGrid.js.

Find this declaration (line 3): var pathtojsfiles = "js/"; // need to be adjusted

Change the path from "js/" to whatever your path is to your jqGrid javascript files.

I changed it to: var pathtojsfiles = "jqgrid/js/"; and it worked.