Alright, this has to be something stupid but I haven't been able to spot it...

I've got a jqGrid with id "grid" (inspired, I know). I'm adding a nav button to the grid as such:

jQuery("#grid").navButtonAdd('#pager', {
        caption : "Manage Files",           
        onClickButton : function(){                         
            var rowid = $('#grid').jqGrid('getGridParam', 'selrow');
            if(rowid == null) 
                alert('Please select a record before trying to manage files');
            makeUploadDialog(rowid);
        }

    });

So, this works. The first time you do it. If you click another row and hit the button again, I get this error:

Uncaught TypeError: Object [object Object] has no method 'jqGrid' 

I'm guessing there's some bad mojo going on with the ordering of events, but I know I've seen this exact approach used by Oleg in a stack post (albeit a 2 year old one).

Any suggestions?

[EDIT to add more code and context]

I discovered that this problem was being triggered somehow by the AJAX loading of the content for the dialog. I've done this type of operation on other projects without an issue, so I'm confused why it would be causing me to "lose context" in this case. If I ment out the last line below...the load call, I can open and close the dialog repeatedly and maintain grid functionality. I just don't understand why...

function makeUploadDialog(rowID) {      
    var dialog = $('<div></div>').appendTo('body');
    dialog.dialog({
        width: 850, 
        autoOpen: true,
        draggable: true,
        resizable: false,
        title: 'Manage Artifacts',
        buttons: {
            Close: function () {
                $("#grid").trigger("reloadGrid");
                dialog.remove();                
            }
        }, 
        close: function () {                
            $("#grid").trigger("reloadGrid");
            dialog.remove();                
        }
    }); 
    dialog.load('getUploadDialog.html?rowId='+rowID);

[EDIT x2]

I've just discovered that the #grid object looks to have been corrupted somehow by the #.load? I did a console.log of the $('#grid') and can see that it is in fact missing all the jqGrid methods, but has some content that seems like it belonged in the dialog (like a reference to the MultiFile object...which is part of MultiFile.js used in the dialog itself for some file uploading). Truly perplexing.

Alright, this has to be something stupid but I haven't been able to spot it...

I've got a jqGrid with id "grid" (inspired, I know). I'm adding a nav button to the grid as such:

jQuery("#grid").navButtonAdd('#pager', {
        caption : "Manage Files",           
        onClickButton : function(){                         
            var rowid = $('#grid').jqGrid('getGridParam', 'selrow');
            if(rowid == null) 
                alert('Please select a record before trying to manage files');
            makeUploadDialog(rowid);
        }

    });

So, this works. The first time you do it. If you click another row and hit the button again, I get this error:

Uncaught TypeError: Object [object Object] has no method 'jqGrid' 

I'm guessing there's some bad mojo going on with the ordering of events, but I know I've seen this exact approach used by Oleg in a stack post (albeit a 2 year old one).

Any suggestions?

[EDIT to add more code and context]

I discovered that this problem was being triggered somehow by the AJAX loading of the content for the dialog. I've done this type of operation on other projects without an issue, so I'm confused why it would be causing me to "lose context" in this case. If I ment out the last line below...the load call, I can open and close the dialog repeatedly and maintain grid functionality. I just don't understand why...

function makeUploadDialog(rowID) {      
    var dialog = $('<div></div>').appendTo('body');
    dialog.dialog({
        width: 850, 
        autoOpen: true,
        draggable: true,
        resizable: false,
        title: 'Manage Artifacts',
        buttons: {
            Close: function () {
                $("#grid").trigger("reloadGrid");
                dialog.remove();                
            }
        }, 
        close: function () {                
            $("#grid").trigger("reloadGrid");
            dialog.remove();                
        }
    }); 
    dialog.load('getUploadDialog.html?rowId='+rowID);

[EDIT x2]

I've just discovered that the #grid object looks to have been corrupted somehow by the #.load? I did a console.log of the $('#grid') and can see that it is in fact missing all the jqGrid methods, but has some content that seems like it belonged in the dialog (like a reference to the MultiFile object...which is part of MultiFile.js used in the dialog itself for some file uploading). Truly perplexing.

• javascript
• ajax
• jquery
• jqgrid

• Can you provide more code – prakashpoudel Commented Jun 28, 2013 at 18:09
• Any particular part? The grid itself is pretty sizeable and it seemed not terribly relevant to the button I was adding other than the name being "grid". – Raevik Commented Jun 28, 2013 at 18:32
• Can you post your jquery initializing function. or jsFiddle would be more ideal – prakashpoudel Commented Jun 28, 2013 at 18:34
• Added grid definition. Hope that helps. – Raevik Commented Jun 28, 2013 at 18:45
• I remend adding a jsFiddle. You may find the problem when you're creating it, but even if you don't, a jsFiddle that exhibits the same behaviour would be really useful to someone trying to figure out what the problem is. – Bikonja Commented Jul 12, 2013 at 19:20

2 Answers 2

I have prepared a generic working example, which triggers the selection event correctly (jsFiddle). What it basically does is adding the columns, adding some data and finally adding a function to react on the onSelectRow event as follows:

$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});

Click twice or more times on any row, it fires as expected.

As suggested by Bikonja, if your issue is more specific to the functions you have added, please modify the example I gave you by the link and post it so we can see if there is any side-effect (e.g. from other linked JavaScript libraries).

Entire JavaScript code:

var data = [[12345, "ABC", "", "3454354", "OPEN"], 
    [98765, "DEF", "", "452673", "CLOSED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'User ID', ' ', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'fld1',
        index: 'fld1',
        width: 90,
        sorttype: "date"},
    {
        name: 'fld2',
        index: 'fld2',
        width: 10},
    {
        name: 'fld3',
        index: 'fld3',
        width: 80,
        sorttype: "float"},
    {
        name: 'fld4',
        index: 'fld4',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example"
});


var names = ["id", "fld1", "fld2", "fld3", "fld4"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

/*
$("#grid").jqGrid('setGridParam', 
    {ondblClickRow: function(rowid,iRow,iCol,e){alert(dbl clicked id='+rowid);}});
*/
$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});

HTML Table definition:

<table id="grid"></table>

It took awhile, but I discovered the problem. The JSP I was using to populate my dialog was linking jQuery redundantly and screwing up the reference to the jQuery elements back on my main page.

Painful.