Jqgrid in jquery ui tabs

I have a custom button for my jqgrid that when pressed takes me to another view. But for some reason when i navigate between the tabs there is an extra added custom button every time a re-visit that tab. Is there a way to say only to add this button once?

This is the markup:

$('#tabs').tabs( {
    show: function (event, ui) {
        if(ui.index == 0) {
           Show some content on this tab.. Not important.
        }

        if(ui.index == 1) {
            $("#functionslist").jqGrid({
                datatype: 'json',
                url: '/Admin/GetFunctionsList',
                colNames: ['Namn'],
        开发者_JS百科        colModel: [
                           { index: 'FunctionName', 
                             name: 'FunctionName', 
                             width: 100, 
                             sortable: false 
                           }
                          ],
                 rowNum: 20,
                 prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null },
                 hidegrid: false,
                 pager: '#functionspager',
                 autowidth: true,
                 shrinkToFit: true,
                 height: '100%',
                 caption: 'Functions',
                 viewrecords: true,
                 onSelectRow: function (id) {
                        window.location.href = '/Function/Edit/' + id;
                 }
             }).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
             .navButtonAdd('#functionspager', {
                 caption: '',
                 title: 'Create new function',
                 buttonicon: 'ui-icon-plus',
                 onClickButton: function () {
                     window.location = '/Function/Add/';
                 }
             }); .... and so forth....

Everything runs fine and i have the behavior i desire but for some reason when i navigate between the two tabs more and more custom button are added. Any ideas why, have tried to resolve this but with no luck.

/Daniel

Why not check to see if the button already exists before adding it?

 if ($('#functionspager :has(".ui-icon-plus")').length == 0) {
     $("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
         .navButtonAdd('#functionspager', {
            ...
          });
 }

The call $("#functionslist").jqGrid({/*parameters*/); convert the empty <table> to a grid having columns, capture, pager and so on. You should make the call once and not repeat it on every tab activation.

Exactly in the same way the methods navGrid and navButtonAdd should be called only once.

So you should decide what should be done if the user select the tab having jqGrid. You can for example call

$("#functionslist").trigger('reloadGrid', [{current:true}]);

(see here for details)