Why does jqGrid refuses to call it's Ajax Call more than once using the OnSelectRow Event

Question

I have a problem with my two jqGrid grids. First I have one grid with some data that works just fine. It has an loadComplete event which sets the first row as selected. This is so that the second jqGrid gets populated based on the selected row (id) on the first jqGrid.

I have an onSelectRow event on the first grid which calls a function which contains the $('#grid).jqGrid() call of the second grid. This second grid has en url which links to a method in a controller which gets some data from a database.

This works all fine for the first selectrow (which happends automatically after the loadComplete).

My problem is that the second jqGrid doesnt repopulate after I select a different row. The programm never gets to the method in the controller (I tested with some logging). I'm really stuck at this since it works for the first load but not the second and so on.

  $("#fontsgrid").jqGrid({ 
        url: 'getfonts',
        mtype: "post",
        datatype: "json",
        sortable: true,
        colNames: ['Name', 'Family', 'Cost', 'Lic', 'File', 'Added', 'Mod', 'Add', 'Edit'],
        colModel: [
            { name: 'name', index: 'name', width: 90, sorttype: "text", sortable: true, align: 'left'},
            { name: 'family', index: 'family', width: 100, sorttype: "text", sortable: true},
            { name: 'cost', index: 'cost', width: 60, sorttype: "currency", sortable: true, formatter: 'currency', formatoptions: {decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "€ "}},
            { name: "licenses", index: "licenses", width: 30, sorttype: "int", sortable: true},
            { name: "filename", index: "filename", width: 90, sorttype: "text", sortable: true},
            { name: "date_upload", index: "date_upload", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
            { name: "date_edit", index: "date_edit", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
            {name: "add_cart", index: 'add_cart', width: 70},
            {name: "edit", index: "edit", width: 30}
        ],
        rowNum: 100,
        width: 580,
        height: 359,
        rowList: [100, 250, 500],
        sortname: "name",
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: "Font List",
        pager: $('#pager'),
        loadComplete: function () { 
            $('#fontsgrid').jqGrid('setSelection', $("#fontsgrid tr[role]").next().attr("id"));
        },
        onSelectRow: function (id) {
            loadInstallGridFonts(id);
        }
    }).navGrid('#pager', {edit: false, add: false, del: false});

    function loadInstallGridFonts($fontid) {
        $('#installGridFonts').jqGrid({
            url: 'getinstallations',
            mtype: "post",
            datatype: "json",
            sortable: true,
            postData: {'fontid': $fontid},
            colNames: ['Installation', 'Bedrijfsnaam', 'Date Installed', 'Edit'],
            colModel: [
                { name: 'installation', index: 'installation', width: 90, sorttype: "text", sortable: true, align: 'left'},
                { name: 'bedrijf', index: 'bedrijf', width: 100, sorttype: "text", sortable: true},
                { name: "date_installed", index: "date_installed", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
                {name: "edit", index: "edit", width: 30}
            ],
            rowNum: 50,
            width: 480,
            height: 359,
            altRows: 'true',
            rowList: [50, 75, 100],
            sortname: "installation",
            sortorder: 'asc',
            viewrecords: true,
            gridview: true,
            caption: "Installation List",
            pager: $('#pagerInstall')
        }).navGrid('#pagerInstall', {edit: false, add: false, del: false});
    }

'getfonts' and 'getinstallations' are both aliases for a controller/method used in routing (codeIgniter).

The problem is that the programm only goes to the method behind the 'getinstallations' once and not after a new rowselect.

Could you include the code of `loadInstallGridFonts` function. It's the place which not work and which is subject of your question. So it's really required to see the code. Moreover you included *separate fragments* which shows how both grids are created instead of posting the full code. It's better to post *one code fragment* which shows how both grids are created. — Oleg, Oct 03 '13 at 10:05
Thanks for your reaction Oleg. I added the loadInstallGridFonts function into the code. The program goes to that function and logs for example a log (console.log) just fine, it just doesnt get the data from the location in the url. In fact it doesnt even go there anymore after the first time. — Sander, Oct 03 '13 at 10:17

score 2 · Accepted Answer · edited May 23 '17 at 12:13

I see many problems in your code. First of all it's important to understand that the code like

$('#installGridFonts').jqGrid({
    ...
});

create the grid. It means that it convert <table> element, which you placed initially on the page, to relatively complex structure of divs and tables (see here for examples). The consequence of it: you can make such call only once. If you try to create the same grid at the second time jqGrid verify that the grid already exist and do nothing. It's exactly what you can see.

One more important thing is the following: jqGrid creates the structure of divs and tables which represent the grid once, but it can fill the body of the grid (the data inside of the grid) multiple times. If you need to fill the grid with the data returned from the server you should just set parameters of the grid (url, datatype, postData and so on) and then make $("#installGridFonts").trigger("reloadGrid"). The reloading means executing new request to the server and loading the data in the the grid.

So the code could be about the following:

// we will use navGrid below more as once without editing buttons
// so we change defaults of navGrid with the folling settings
$.extend($.jgrid.nav, {edit: false, add: false, del: false});

// creates the second grid. because we don't want to make any request
// to the server at the time we will use datatype: "local"
$("#installGridFonts").jqGrid({
    datatype: "local",
    ...
}).jqGrid("navGrid", "#pagerInstall");

// create the first grid
$("#fontsgrid").jqGrid({
    ...
    onSelectRow: function (rowid) {
        $("#installGridFonts").jqGrid("setGridParam", {
            datatype: "json",
            postData: {fontid: rowid}
        }).trigger("reloadGrid");
    }
}).jqGrid("navGrid", "#pager");

If it's required you can hide the second grid directly after creating and show it inside of onSelectRow callback.

Thanks for the detailed explanation. I've got the nav correct now according to your example. I also placed the reload triggerin the onSelectRow event. The problem is now that the postData is not passed to the $_POST in the receiving method. Also if the dataType is local (Expecting an array back according to the wiki) the php method which handles the data never gets called since?: _local (we expect data defined at client side (array data)_. If the dataType is json then the method in my controller gets called but without the postData given to it. — Sander, Oct 03 '13 at 12:41
It seems it works after a select now (manually). It loads the correct data now (only not the first time just, which isnt that big of a deal). Thanks for the help! — Sander, Oct 03 '13 at 12:45
@Sander: Sorry I made typing error in parameters of `setGridParam`. One should use `datatype: "json"` — Oleg, Oct 03 '13 at 12:46

Why does jqGrid refuses to call it's Ajax Call more than once using the OnSelectRow Event

1 Answers1