JQuery tabs that select a specific tab

Question

I have a page containing a set of jQuery tabs. All tabs point to the same target div, but load it using other content via ajax. When I perform the initial full page load, I need to set the active tab differently depending on various factors. The content in the target div is already configured on the server for this boot, so I don’t need to click a tab, I just need to set the correct tab to "selected". I tried to set the class of the corresponding "li" html element to "ui-tabs-selected". This has the initial desired effect, but after loading the page, and then when you select another tab, the previously selected one does not turn off, leaving two tabs.

So, does anyone know an alternative way to pre-select a tab (without forcing it to click) or a solution to the weird behavior selected by "ui-tabs-selected" that I see.

Thanks.

<script type="text/javascript"> $(function() { $("#panelTabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); } } }); $("#panelTabs").tabs({ select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); } }); }); </script> 

And the C # snippet that UL creates:

 StringBuilder tabsLiteral = new StringBuilder(); tabsLiteral.Append("<ul>"); foreach (KeyValuePair<string, Tab> kvp in tabs) { tabsLiteral.Append("<li>"); // Note - the kvp.Value.URI determines what should happen when the Tab is clicked tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); tabsLiteral.Append("</li>"); } tabsLiteral.Append("</ul>"); _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); HtmlGenericControl ctl = new HtmlGenericControl(); StringBuilder html = new StringBuilder(); html.Append("<script type=\"text/javascript\">"); html.Append("$(\"#panelTabs\").tabs({selected: 2});"); html.Append("</script>"); ctl.InnerHtml = html.ToString(); _panelTabs.Controls.Add(ctl); 

Another version:

 StringBuilder tabsLiteral = new StringBuilder(); tabsLiteral.Append("<ul>"); foreach (KeyValuePair<string, Tab> kvp in tabs) { string active = ""; if (currentTabCaption == kvp.Value.Caption) { //active = " class=\"ui-tabs-selected\""; } tabsLiteral.Append("<li" + active + ">"); // Note - the kvp.Value.URI determines what should happen when the Tab is clicked tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); tabsLiteral.Append("</li>"); } tabsLiteral.Append("</ul>"); _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); HtmlGenericControl ctl = new HtmlGenericControl(); StringBuilder html = new StringBuilder(); html.Append("<script type=\"text/javascript\">"); //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); html.Append(@"$(function() { alert('initialising tabs'); $(""#panelTabs"").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible.""); } }, select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); } }); });"); html.Append("$(\"#panelTabs\").tabs({selected: 2});"); html.Append("</script>"); ctl.InnerHtml = html.ToString(); //_panelTabs.Controls.Add(ctl); Page.Controls.Add(ctl); 

Answer 1

You may have the first line inside the tab switching function to remove the selected class:

 var uiTabsSelected = '.ui-tabs-selected'; $(uiTabsSelected).removeClass(uiTabsSelected); 

Answer 2

What you are looking for is the chosen option . For example.

 $("#MyTabs").tabs({ selected: 2 }); 

Answer 3

Change this:

 html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 

For this:

 html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 

Edit: and ...

 $(function() { $("#panelTabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); }}, select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); } }); }); 

Answer 4

In case someone else comes here to search for an answer, the current (from this date) way of choosing a tab (jQuery UI 1.10) is to use the "active" option:

Initialize tabs with the specified active option:

 $( ".selector" ).tabs({ active: 1 }); 

http://api.jqueryui.com/tabs/#option-active

Answer 5

The solution was to add and remove classes as ethanol suggested. The following C # shows both the built UL and the necessary jQuery script injection. The important bit is in the show: function function, in which the classes manipulate. It is this code that works around the problem.

 StringBuilder tabsLiteral = new StringBuilder(); tabsLiteral.Append("<ul>"); foreach (KeyValuePair<string, Tab> kvp in tabs) { //string tabClass = " class=\"ui-state-default\""; string tabClass = " class=\"ui-state-default\""; if (currentTabCaption == kvp.Value.Caption) { tabClass = " class=\"ui-tabs-selected\""; } tabsLiteral.Append("<li" + tabClass + ">"); //tabsLiteral.Append("<li>"); // Note - the kvp.Value.URI determines what should happen when the Tab is clicked tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); tabsLiteral.Append("</li>"); } tabsLiteral.Append("</ul>"); _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); HtmlGenericControl ctl = new HtmlGenericControl(); StringBuilder html = new StringBuilder(); html.Append("<script type=\"text/javascript\">"); //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); html.Append(@"$(function() { $('#panelTabs').tabs({ select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); }, show: function(event, ui) { // You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work $('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected'); $(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected'); //$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up } }); });"); html.Append("</script>"); ctl.InnerHtml = html.ToString(); //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery