Question

I created a reusable function for creating jqGrid.

function createJqGrid(){
    $("#" + gTableId).jqGrid({
            datastr: jsonData,
            datatype: 'jsonstring',
            jsonReader: { repeatitems: false, root: function(obj) { return obj; }},
            headertitles: true,
            sortable: true,
            rownumbers: isRowNum,
            colNames: colHeadNames,
            colModel: colModel,
            rowNum: jsonData.length,
            width: viewableWidth,
            height: viewableHeight,     
            shrinkToFit: isShrink,
            scrollOffset: 0,
            onSelectRow: func,
            loadComplete: function(data) {
                alert(gTableId);                
            }
        });
}

This function and all the setting of parameters is encapsulated inside MyObject. My four jsp’s have their own distinct instance of MyObject. But when I trigger a reloadGrid of jqGrid, the id of the last table that used this function is being alerted.

Given:
table1 is inside table1.jsp
table2 is inside table2.jsp
table3 is inside table3.jsp
table4 is inside table4.jsp

$("#table1").trigger("reloadGrid"); alerts “table4”
$("#table2").trigger("reloadGrid"); alerts “table4”
$("#table3").trigger("reloadGrid"); alerts “table4”
$("#table4").trigger("reloadGrid"); alerts “table4”

Seems like the loadComplete of the last created table is being triggered. Why is it so?

Answer 1

I do believe that the triggered loadComplete is the correct one and the issue is more with the logic of your JavaScript. The variables declaration section is missing in your sample but it looks like gTableId is a global variable. In that case every call to it will always get its last value (and your alert is always taking the current value of gTableId, it’s not freezed in any way). Please try modifying your loadComplete like this to verify:

loadComplete: function(data) {
    alert($(this).attr('id');
}