duplicated navbar buttons on jqGrid

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(&quo开发者_如何学编程t;#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.

---

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

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

---

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.

---

$("#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');

---

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
});