duplicated navbar buttons on jqGrid.

Question

Hi,

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.

Regards.

[1]: http://a.imageshack.us/img46/7697/repeatf.jpg image

Answer 1

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 http://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box/2928819#2928819). 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.

Answer 2

thanks for your advice, follow your tips and added the following line disappeared duplication of the buttons

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