duplicated navbar buttons on jqGrid

Question

I'm having a problem refreshing my grid, because I add some extra buttons after I load my grid, but when I try to reload another button is added.

  $j(document).ready(function (){
     $j("#search").button().click(function() {
       var loadingImg = "../img/bpm_scripts/common/images/images";
        var ejecutive=$j("#ejecutiveId").val();
        buildTable(ejecutive);
     });
 });

and

function buildTable( ejecutive){
    $j("#list").jqGrid('setGridParam',
                       {postData:{ ejecutive:ejecutive}, search:true });
    $j("#list2").trigger("reloadGrid");
    $j("#list2").jqGrid({ 
        url: "<f:invokeUrl methodName='getInstances' var='sales'/>",
        datatype: "xml", 
        colNames:['Inv No','No','Creado','Actualizado','Estatus','Hotel'], 
        colModel:[ 
            {name:'invoiceId',index:'invoiceId', width:40},
            {name:'invoiceContracCustom',index:'invoiceContracCustom', width:50},
            {name:'invoiceCreatedBy',index:'invoiceCreatedBy', width:100},
            {name:'invoiceUpdatedBy',index:'invoiceUpdatedBy', width:100},
            {name:'invoiceStatus',index:'invoiceStatus', width:75,align:'center'},
            {name:'invoiceHotels',index:'invoiceHotels', width:75,align:'center'}
        ], 
        rowNum:10, 
        autowidth: true, 
        rowList:[10,20,30],
        pager: jQuery('#pager2'), 
        sortname: 'invoiceId', 
        viewrecords: true, 
        sortorder: "desc", 
        xmlReader: { 
            root: "results",    
            row: "invoice",
            repeatitems: false, 
            page: "page>currentpage",
            total: "page>pages", 
            records:"page>records",
            id: "invoiceId" 
        }, 
        caption:"XML Example" }).navGrid('#pager2',
            {edit:false,add:false,del:true},
            {height:280,reloadAfterSubmit:false}, // edit options 
            {height:280,reloadAfterSubmit:false}, // add options 
            {reloadAfterSubmit:false}, // del options 
            {}); // search options 
    });

and then this is invoked:

$j("#list2").jqGrid('navButtonAdd','#pager2', {
    caption:"",
    buttonicon:"ui-icon-check",
    position:"last",
    onClickButton:function(){ 
        var gsr = jQuery("#list2").jqGrid('getGridParam','selrow'); 
        if(gsr){
            $j.ajax({
                url: "url",
                type: 'GET',
                async: true,
                success: function() { alert('fine');  },
                error:function() { alert('Se ha producido un error'); } });
        }
        else 
            alert("Please select Row") ;
    } 
});

}

I don't know where should be this part, because if I put it before then no button is loaded.

What do you do inside of `buildTable()`? Why your code ctarted with `reloadGrid` before the grid are created? — Oleg, Jul 14 '10 at 14:19
Added missing code, buildtable was removed, but the idea is that when you click the button to delete, delete the records of the database, then reload the grid — yen, Jul 14 '10 at 15:27

score 2 · Answer 1 · edited Jul 13 '22 at 15:04

2

I followed Oleg's tips and added the following line and have disappeared duplication of the buttons.

$j("#list").jqGrid('GridUnload');

edited Jul 13 '22 at 15:04

TylerH

20,799
66
75
101

answered Jul 19 '10 at 20:50

yen

31
1
4

score 1 · Answer 2 · edited May 23 '17 at 12:33

It seems to me that you should just reorder some functions

$j(document).ready(function (){
    // create jqGrid with additional button
    $j("#list2").jqGrid({ 
        url: "<f:invokeUrl methodName='getInstances' var='sales'/>",
        datatype: "xml", 
        // .... other jqGrid parameters
    }).jqGrid('navButtonAdd','#pager2', {
        // all navButtonAdd parameters
    });

    $j("#search").button().click(function() {
        var loadingImg = "../img/bpm_scripts/common/images/images";
        $j("#list").jqGrid('setGridParam',
                   {postData:{ ejecutive: $j("#ejecutiveId").val()}, search:true });
        $j("#list2").trigger("reloadGrid");
    });
});

Moreover you can use postData as a function directly in the definition of $j("#list2").jqGrid (see How to filter the jqGrid data NOT using the built in search/filter box). Then you can change the code to the following

$j(document).ready(function (){
    // create jqGrid with additional button
    $j("#list2").jqGrid({ 
        url: "<f:invokeUrl methodName='getInstances' var='sales'/>",
        postData: {
            ejecutive: function() { return $j("#ejecutiveId").val(); },
            search:true
        },
        datatype: "xml", 
        // .... other jqGrid parameters
    }).jqGrid('navButtonAdd','#pager2', {
        // all navButtonAdd parameters
    });

    $j("#search").button().click(function() {
        var loadingImg = "../img/bpm_scripts/common/images/images";
        $j("#list2").trigger("reloadGrid");
    });
});

You can include more logic in the function which calculate the ejecutive parameter if needed. It's important to understand, that on every jqGrid refresh the function will be called immediately before the ajax call. So you will have always the actual value of "#ejecutiveId" used.

score 0 · Answer 3 · edited Jul 13 '22 at 15:05

0

$("#grid").jqGrid('GridUnload');

$("#grid").jqGrid({
        url: "");

jQuery("#grid").jqGrid('setGridParam', { postData: {
                id: function () { return balanzaConfig.formDataParam.id; },
                strDate: function () { return balanzaConfig.formDataParam.strDate; }
            }
            }).trigger('reloadGrid');

edited Jul 13 '22 at 15:05

TylerH

20,799
66
75
101

answered Sep 10 '14 at 17:29

Pepe Ambrocio

9
1

score -1 · Answer 4 · edited Jul 13 '22 at 15:09

-1

I found adding an explicit call to 'GridUnload' function is not necessary.

If you set 'id' to the button, it will not duplicate the button on nav bar, here is an example:

$j("#list2").jqGrid('navButtonAdd','#pager2', {
    id: "btnId",
    .
    .
    .
    . rest of the code
});

edited Jul 13 '22 at 15:09

Dharman

30,962
25
85
135

answered Feb 13 '15 at 21:10

somedude

169
3
12

It doesn't work. both buttons get same id. – Mimi Sep 15 '21 at 19:16

duplicated navbar buttons on jqGrid

4 Answers4