How to disable tabs in JqGrid at runtime?

Question

Two Default Grids Defenition:

initialise(){
$("#ExpenseTable").jqGrid({
    datatype : "local",
    mtype : 'GET',
    colModel : [ {name:'expnsId',label:'ID', width:150 }, 
                 {name:'userName',label:'NAME', width:150 },
                 {name:'catName',label:'CATEGORY', width:150 },
                 {name:'date',label:'DATE', width:150 },
                 {name:'amount',label:'AMOUNT', width:150 },
                 {name:'status',label:'STATUS', width:150 }],
    pager : '#ExpPager',
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    sortname : 'invid',
    sortorder : 'desc',
    viewrecords : true,
    autowidth : false,
    caption : 'Expenses Details',
    onSelectRow : function(expnsId) { dispExpensData(expnsId); }
    }); 
$("#tabs").tabs();
getTokens();//Gets the tokens for the logged in user.
refreshExpenseGrid();//Populates data to the grid
dispLeaveGrid();// It ll call the next default grid
 }
 }

$("#LeaveTable").jqGrid({
    datatype : "local",
    mtype : 'GET',
    colModel : [ {name:'leaveId',label:'ID', width:150 }, 
                 {name:'userName',label:'NAME', width:150 },
                 {name:'fdate',label:'DATE', width:150 },
                         {name:'tdate',label:'DATE', width:150 }
                 {name:'status',label:'STATUS', width:150 }],
    pager : '#ExpPager',
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    sortname : 'invid',
    sortorder : 'desc',
    viewrecords : true,
    autowidth : false,
    caption : 'Leave Applications',
    onSelectRow : function(leaveId) { displeaveData(leaveId); }
    }); 
refreshLeaveGrid();//Populates data to the grid
securedUI();//This ll call the below function, to check whether the remaining tabs can be visible or not

Secured UI Function:

function securedUI(){


var secToken = "DELETEUSER";
if(!checkRoleToken(secToken)){//If users dont have token to delete user, the buttons ll be disabled
    $('#expDelete').attr('disabled', 'disabled');
    $('#lveDelete').attr('disabled', 'disabled');
    $('#delUser').attr('disabled', 'disabled');
    $('#roleDel').attr('disabled', 'disabled');
    $('#tokenDel').attr('disabled', 'disabled');
}


var secToken= "VIEWUSER";
if(checkRoleToken(secToken)){
    showUserdetails();//3rd Grid Defn:Contains the table definition for user grid.
    initialiseRole();//4th Grid Defn: Role grid
    showtokens();//5th Grid Defn: token grid
}

Check Token:

function checkRoleToken(newToken){
for( var i = 0; i<tokens.length; i++ ){
    var token = tokens[i];//Tokens is like cache, which contains all the tokens that are assigned for the current user.
    if(newToken == token.tokenName){
        return true;
    }
}
return false;
 }

The html page:

<script type="text/javascript">
$(document).ready(function() {
    initialise();
});
</script>

The LeaveTable is 2nd grid and i have 3 more grids. But i dont want to show them to all of the users, instead admin users should able to see them. Tokens are the key to find the user have the right to do any operation in the Application. Tokens, that are assigned for the user will be loaded to a client-Side Cache like Array tokens.

Every function like ADD, DELETE, UPDATE & VIEW have their tokens at the start of the function that stored in a variable. That token variable will sent to CheckToken() as argument. There it will check that token against the token cache. It ll return true or false. The operation will cancelled or continued according to that result.

In the above code, at the end of the LeaveTable grid defenition, you can see a function call securedUI();. Inside that function i am doing two things. 1.Disabling Delete Buttons, 2.Disabling the 3rd, 4th & 5th grids, for those who dont have tokens DELETEUSER & VIEWUSER.

Actually what i am getting now is, the 3rd, 4th & 5th grids are not getting displayed for those who have token VIEWUSER. Look at the functions securedUI() & checkToken(), what they should do!!! securedUI() have VIEWUSER token and the current user also, so the checkToken() should return true, so it should get into the if block and execute the functions calls inside the if block. But its not doing it. I cant able to get any clue about where i am going wrong.

So, i turned on the firebug and checked it step by step. Magically, now its going into the if block and shows the grid for admin users. Now i felt that it worked then i turned turned off the firebug and reloaded the page again. Ooops, again that 3 remaining grids are not displaying. Can you now able to get an idea about my problem!!!

Any suggestions!!!

Answer 1

It seems to me that you should just place all your JavaScript code inside of jQuery(document).ready handle: jQuery(document).ready(function() {/* place your code here */});

If you do use this handle, please post more full code of your example inclusive full HTML code. You can reduce the code example to have example more compact. Important is only that the problem stay in the code and everyone can reproduce the problem.