jquery grid dynamically loaded via ajax

Question

To have a jquery grid in a typical page gridePage.html with some HTML and JavaScript code I do

 $("#gridtable").jqGrid('setGridParam', {
        data:  [
            {'type': 'aType', 
             'area': 'anArea'}]
    }).trigger("reloadGrid");

Now consider I have a main.html page which loads the gridePage.html via ajax call and put it in a div.

<div id="content"></div>

$.ajax({
        url : "/gridePage.html",         
        success : function(data) { //the data is all the content in gridePage.html
            $('#content').html(data);
        }
    });

The javascript code in gridePage.html ( $("#gridtable").jq... ) is not working any more.

If I change gridePage.html and wrap the JavaScript in setTimeout it will work as it will delay the execuation of $("#gridtable").jq...

As you can see I have add ("#gridtable").jq... to ajax success or ( and also tried complete ) but still it is not working.

I see a topic at How to bind Events on Ajax loaded Content? seems same problem, but i don't know how can I use it with grid

Answer 1

Try this

$('#content').load("/gridePage.html", function() {
  $(this).jqGrid('setGridParam', {
    data: [{
      'type': 'aType',
      'area': 'anArea'
    }]
  }).trigger("reloadGrid");
});