JQGRID: Trigger Reload not working on iFrame

Question

I have a web page with an iFrame. It loads a web page (same domain) with a jqGrid table. What I'm trying to do now is:

• You press a link called search it opens a dialog with a filter form to filter your search.
• When you press search button inside the dialog, it changes jqGrid url param and it should .trigger('reloadGrid') .

It does all except the reloadGrid , I don't know why.

Any suggestion?

Code:

// DIALOG-ACTION-SEARCH IS THE BUTTON CLASS
$('#dialog').find('.dialog-action-search').button({icons: {
    primary: 'ui-icon-search'
}, text: true}).click(function(e) {
    e.preventDefault();
    $('.content-center').contents().find('#list').setGridParam({
        url: 'filteredsearch.html?option=1'
    }).trigger('reloadGrid');
    $('#dialog').dialog('destroy');
    $('#dialog').remove();
});

Answer 1

I've found that before calling trigger('reloadGrid') with JSON data, you should reset the datatype parameter.

$("#grid").jqGrid('setGridParam', { datatype: 'json' });

In response to your comments, I would split up the chained method calls and then put a breakpoint on e.preventDefault() in Chrome debugger so you can assure that everything is actually getting hit.

$('#dialog').find('.dialog-action-search').button(
    { 
        icons: { primary: 'ui-icon-search' } ,
        text: true
    });
$('#dialog').find('.dialog-action-search').click(function(e) {
    e.preventDefault();
    var grid = $('.content-center').contents().find('#list');
    $(grid).jqGrid('setGridParam', { url: 'filteredsearch.html?option=1' });
    $(grid).jqGrid('setGridParam', { datatype: 'json' });
    $(grid).trigger('reloadGrid');
    $("#dialog").dialog('destroy');
    $("#dialog").remove();
});

While I'm a fan of chaining when you can, in this case I don't think you're going to find the root of the issues without doing things a little more explicitly, especially when using .find . How do you know that the .find is actually returning the element that you want?

Answer 2

setGridParam returns a jqGrid object, not a jQuery object, so I'm pretty sure you can't chain the trigger method. Try this instead:

var list = $('.content-center').contents().find('#list')
list.setGridParam({
    url: 'filteredsearch.html?option=1'
})
list.trigger('reloadGrid');

Answer 3

I experienced same problem. I did not have time to investigate why it was happening but found a workaround for it. In a javascript file that loads inside iframe with your grid I declared

window.top.reloadEventList = function () {
$("#grid").trigger("reloadGrid");};

Then just call

window.top.reloadEventList()

instead of

list.trigger('reloadGrid')