Question

Expert,

I have created one application and implemented JQGrid for Add, Edit and Delete, This is working fine with Running from Visual Studio 2010.

Now i created Virtual Directory for this application and then i am trying to access Index page it will not displaying anything because the JQGrid was not loaded it is giving me
following errr:
Error: jQuery(“#list”).jqGrid is not a function
Source File: http://localhost/CAFM/TabMaster
Line: 58

Here is the JQGrid code snippet.

jQuery(document).ready(function () {
        alert(jQuery("#list"));
        jQuery("#list").jqGrid({
            url: '/TabMaster/JQGridGetGridData',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['col ID', 'First Name', 'Last Name'],
            colModel: [
                      { name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                      { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true },
                      { name: 'LastName', index: 'LastName', width: 300, align: 'left', editable: true },
                    ],
            pager: jQuery('#pager'),
            rowNum: 100,
            rowList: [10, 50, 100, 500, 1000, 2000, 5000, 7000, 10000],
            sortname: 'colID',
            sortorder: "asc",
            viewrecords: true,
            multiselect: true,
            imgpath: '/scripts/themes/steel/images',
            caption: 'Tab Master Information'
        }).navGrid('#pager', { edit: true, add: true, del: true },
        // Edit options
                {
                savekey: [true, 13],
                reloadAfterSubmit: true,
                jqModal: false,
                closeOnEscape: true,
                closeAfterEdit: true,
                url: "/TabMaster/JQGridEdit",
                afterSubmit: function (response, postdata) {
                    if (response.responseText == "Success") {
                        jQuery("#success").show();
                        jQuery("#success").html("Record updated successfully! [" + postdata.FirstName + " " + postdata.LastName + "]");
                        jQuery("#success").fadeOut(6000);
                        return [true, response.responseText]
                    }
                    else {
                        return [false, response.responseText]
                    }
                }
            },
        // Add options
                {
                url: '/TabMaster/JQGridCreate',
                closeAfterAdd: true,
                afterSubmit: function (response, postdata) {
                    if (response.responseText == "Success") {
                        jQuery("#success").show();
                        jQuery("#success").html("Record added successfully! [" + postdata.FirstName + " " + postdata.LastName + "]");
                        jQuery("#success").fadeOut(6000);
                        return [true, response.responseText]
                    }
                    else {
                        return [false, response.responseText]
                    }
                }
            },
        // Delete options
               {
               url: '/TabMaster/JQGridRemove',
               afterSubmit: function (response, rowid) {
                   if (rowid.length > 0) {
                       jQuery("#success").show();
                       jQuery("#success").html("Record deleted successfully! [" + rowid + "]");
                       jQuery("#success").fadeOut(6000);
                       return [true, response.responseText]
                   }
                   else {
                       return [false, response.responseText]
                   }
               }
           },
                {
                    closeOnEscape: true,
                    multipleSearch: false,
                    closeAfterSearch: true
                }
                   );
    });

following are the JQuery files that i included in my projects.

 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="Stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/themes/steel/grid.css")" rel="Stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/themes/jqModal.css")" rel="Stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/js/jqModal.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/js/jqDnR.js")" type="text/javascript"></script>

following is the hierarchy of Scripts

Thanks in advance!
Imdadhusen

Answer 1

It doesn’t work because you have hardcoded your urls:

url: '/TabMaster/JQGridGetGridData'

You should always be using URL helpers when dealing with urls:

url: '@Url.Action("JQGridGetGridData", "TabMaster")'

When you deploy your application in a virtual directory the address i no longer /TabMaster/JQGridGetGridData but it is /YourApplicationName/TabMaster/JQGridGetGridData. That’s the reason why you should always use url helpers.

The same stands true for your edit options url and your image paths. For static resources use @Url.Content and for controller actions use @Url.Action.