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