Tuesday, October 30, 2012

Order of Javascript Execution

Situation/Problem: In an ASP.Net MVC application, I had a tab control where the tab click is disabled using following 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. 
but still the intended tab was not getting selected. Searched web and spent hours but no use.

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