Event not firing within a function when using jqGrid and jQuery

Question

I'm new to javascript, jQuery and jqGrid, so this is probably a pretty basic question.

Why does the event fire correctly here, triggering the alert:

        $("#list").jqGrid({loadComplete: alert('load complete')
            });

but not here when the alert is inside a function?

        $("#list").jqGrid({loadComplete:
                               function() {
                                    alert('load complete');
                               }
            });

I'm guessing that there's something pretty basic that I don't (yet) understand.

Thanks. --Jeff

Answer 1

It takes a function, when you pass it the alert itself, you're calling the alert right then and trying to assign the result to the handler. Instead you need an actual handler (an anonymous function in the case of your second call).

It's not that the first is firing correctly on the event, it's actually firing as soon as that line of code runs, it sounds like your code isn't firing the loadComplete handler at all, which is a separate issue with jqGrid.

Answer 2

I tried to do the same thing recently (same position as you, essentially new to everything), loadComplete never worked for me. Investigating now, now that I understand it a bit more:

Looking at the source, it appears loadComplete only fires if your datatype is "script" or "xmlstring", which makes it pretty useless. And strange.

If you're trying to use it to do something before data is entered into the grid, I'd recommend making your datatype a function, and performing your own ajax / whatever operations in there. When the data comes back, just do grid.addData(data), and it'll populate the grid.

If you're trying to do something after the data has been entered, use gridComplete instead, it fires reliably.

Answer 3

After you publish the link http://ccclients.com/TEST/TEST.php I understand what error you make. You should not separate jqGrid definition in two calls:

jQuery("#list").jqGrid({
    datatype: 'xml',
    mtype: 'GET',
    loadonce: true,
    // other parameters
    caption: 'My first grid', 
    xmlReader: { 
        root: "export", 
        row: "row",
        repeatitems: false
    }
 });

and

$("#list").jqGrid({loadComplete: 
            function() {
                alert('load complete')
            }
});

but define loadComplete as a part of one call of $("#list").jqGrid({ ... }); like following:

jQuery("#list").jqGrid({
    datatype: 'xml',
    mtype: 'GET',
    loadonce: true,
    // other parameters
    caption: 'My first grid', 
    xmlReader: { 
        root: "export", 
        row: "row",
        repeatitems: false
    },
    loadComplete: function(data) {
        alert('load complete');
    }
 });

If you do have to set an event handler later you should use setGridParam method (See http://stackoverflow.com/questions/3148320/add-an-event-handler-to-jqgrid-after-instantiation/3149534#3149534)

Moreover I strictly disagree with the answer of Groxx. The function loadComplete will be called for all datatypes (inclusive 'xml', 'json', 'local' and so on). How you can see in the documentation under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#execution_order the function loadComplete is the perfect place to make some modification in the grid after the data are loader (or refreshed). I use this function permanently. The usage of datatype a function is a last ways if you need to load very exotic data (neither xml nor json etc). For loading of xml and json data there are a lot of customization features in jqGrid (see http://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731 for example). So you can customize the jQurey.ajax call and convert the data used as input and output of jQurey.ajax practically like you want.