Skip to content

Instantly share code, notes, and snippets.

@19WAS85
Created December 13, 2011 12:19
Show Gist options
  • Save 19WAS85/1471935 to your computer and use it in GitHub Desktop.
Save 19WAS85/1471935 to your computer and use it in GitHub Desktop.
Javascript hack to fix invisible (Visible="false") AjaxControlToolkit TabPanels.
<asp:TabPanel runat="server" ID="secondTab" HeaderText="2nd" Visible="false">
_selectedPanelsId = {}
var setVisibility = function(panelId) {
// Header.
var activeHeader = $('span[tab-panel='+ panelId +']');
var headers = activeHeader.parent().children()
headers.removeClass('ajax__tab_active')
activeHeader.addClass('ajax__tab_active')
// Panels.
var activePanel = $('#'+ panelId);
var panels = activePanel.parent().children()
panels.css('visibility', 'hidden').hide()
activePanel.css('visibility', 'visible').show()
}
var tabHack = function() {
setTimeout(function() {
var containers = $('.ajax__tab_container')
// Foreach tab header...
containers.each(function() {
var container = $(this)
var containerId = container.get(0).id
var headers = container.find('.ajax__tab_header').first().children()
var panels = container.find('.ajax__tab_body').first().children()
var panelIndex = 0;
// Foreach tabHeader...
headers.each(function() {
var header = $(this)
var enabled = header.children().length > 0;
// Add disabled behavior.
if (!enabled) {
header.replaceWith('<span class="disabled"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab">'+ header.text() +'</span></span></span></span>')
}
// Fix onclick bug.
if(enabled && panels[panelIndex++] != null) {
header.attr('tab-panel', panels[panelIndex++].id)
header.click(function() {
var panelId = $(this).attr('tab-panel')
setVisibility(panelId)
_selectedPanelsId[containerId] = panelId
})
}
})
// Fix ajax postback tabindex bug.
var selectedPanelId = _selectedPanelsId[containerId]
if(selectedPanelId != null) {
setVisibility(selectedPanelId)
}
})
}, 1)
}
Sys.Application.add_init(tabHack)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(tabHack)
.CWITabContainer .disabled .ajax__tab_tab {
background: url(../Images/CWITabContainer/tab-disabled.gif) repeat-x;
cursor: default;
}
.CWITabContainer .disabled .ajax__tab_outer {
background: url(../Images/CWITabContainer/tab-disabled-right.gif) no-repeat right;
}
.CWITabContainer .disabled .ajax__tab_inner {
background: url(../Images/CWITabContainer/tab-disabled-left.gif) no-repeat;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment