Question

I have the following code in a separate script file in my project for populating jqGrid.

jQuery(document).ready(function () {
    ("#List").jqGrid({
    url: '/Dept/Index/',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Name'],
    colModel: [{ name: 'Name', index: 'Name', width: 300, align: 'left'}],
    pager: jQuery('#pager'),
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'Id',
    sortOrder: "desc",
    viewrecords: true,
    caption: 'Dept List'
    });
});

When I run the project, I observe the following error in Firebug’s console. TypeError: "#List".jqGrid is not a function.

If I however embed the script within a file, the error disappears. I have followed the instructions on how to install and also looked at answers to similar errors and I am certain that I have jqgrid.js and grid.locale-en.js in the proper order.

How can I eliminate this error?

Answer 1

You should use:

$("#List")

or:

jQuery("#List")

You can read about it here:

http://api.jquery.com/jQuery/

The result of ("#List") is just a String, which is why the interpreter claims there is no method called jqGrid.