Situation/Problem: In an ASP.Net MVC application, I had a tab control where the tab click is disabled using following code:
What was wrong with this code?
Workaround/Solution: Finally, while debugging navigation function I noticed a tab which is getting selected and after completion of debug its going back to first tab.
Then, I realized that the intended tab is getting selected but its re-initializing in jquery initializer. So, the solution is quite simple. I need to call navigate function after execution of tab initilizer on jquery initializer. Here is the final working code:
$(function () {
$("#tabs").tabs({
select: function (event, ui) {
if (enableTabSelection) {
enableTabSelection = false;
return true;
}
return false;
}
});
});
Here enableTabSelection is a flag which is used to enable the tab selection temporarily. On some javascript function, I was selecting a particular tab like this:
function navigate(pageDetails){
enableTabSelection = true;
var $tabs = jQuery("#tabs").tabs();
$tabs.tabs("select", pageDetails.tabId);
}
This was working fine. Later, there was a requirement where I need to select a particular tab on load of the page depending upon a json data. Well, Inside the script tag I used below code to do this.navigate(@Html.Raw(Json.Encode(Model)));Unfortunately, the intended tab was not getting selected with this.
What was wrong with this code?
- I called the same function to navigate to a specific tab.
- Checked pageDetails.tabId in console it was returning the proper value.
- There is no error/exception on the page.
Workaround/Solution: Finally, while debugging navigation function I noticed a tab which is getting selected and after completion of debug its going back to first tab.
Then, I realized that the intended tab is getting selected but its re-initializing in jquery initializer. So, the solution is quite simple. I need to call navigate function after execution of tab initilizer on jquery initializer. Here is the final working code:
$(function () {
$("#tabs").tabs({
select: function (event, ui) {
if (enableTabSelection) {
enableTabSelection = false;
return true;
}
return false;
}
});
navigate(@Html.Raw(Json.Encode(Model)));
});