Question

First… here is what I am using.
JQuery 1.4.4
JQuery-UI 1.8.11
JqGrid 3.8.2

Here are my includes in the HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

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

<script type="text/javascript" src="/resources/default/scripts/jquery/jqGrid/jquery.jqGrid.3.8.2.min.js"></script>

All of these script links are working correctly.
Here is my Grid definition:

$('#adminPermissionsGrid').jqGrid({
    url:'/admin/permission/get-permissions',
    mtype: 'GET',
    datatype: 'json',
    jsonReader: {
        id: 'id',
        repeatitems: false
    },
    colModel: adminPermissionsColumnModel,
    pager: '#adminPermissionsPager',
    rowNum: 50,
    altRows: true,
    hidegrid: false,
    sortname: 'resource',
    autowidth: true,
    height: 450,
    gridview: true,
    viewrecords: true,
    caption: translate.admin_table_permission_caption,
    onSelectRow: function(rowId, status) {
        populatePermissionForm(rowId);
    }
})
.navGrid('#adminPermissionsPager',{add:false, edit:false, del:false, search:false, refresh:true});

And here is “populatePermissionForm()”

function populatePermissionForm(rowId)
{
    //TODO : WTF? Why can't I use jqgrid functions here?
    var rowData = $('#adminPermissionsGrid').jqGrid('getRowData', rowId);
    ...
}

So here is my problem. I load the grid with $(document).ready(). The grid works as expected, has about 20 rows of data in it. When I click on one of the rows I get the following error in firebug:

$("#adminPermissionsGrid").jqGrid is not a function

It reports that this line is the culprit:

var rowData = $(‘#adminPermissionsGrid’).jqGrid(‘getRowData’, rowId);

I’ve inspected $(“#adminPermissionsGrid”) with Firebug and it still looks as if the grid object is attached to it. I’ve spent hours trying to find the answer to this. It seems that after the initial load, I can’t use any grid methods. I have a HACKY workaround that surfs the DOM of the grid, but I don’t want to do that…

Any thoughts?

Answer 1

Culprit found! I’m using the ZFDebug plugin for Zend which relies on jQuery. This plugin automatically turns on noConflict. There is not option in the plugin to toggle this, but when I comment out the noConflict line… everything works as expected.