通过ajax在新的浏览器选项卡中打开JQuery UI选项卡将直接显示ajax响应的HTML

Question

I am currently upgrading from JQuery UI 1.8.14 to JQuery UI 1.10.

With the v1.8.14 code, opening the tab with a new browser tab will reload the entire page, which activates the default tabs (ie. tabIndex=0)

I am encountering an issue with respect to JQuery UI Tabs and opening the tab in a new browser tab/window. On my page, by right clicking the tab and selecting "open link in new tab". The tab content will be loaded via ajax

The issue is that the new page will straight up display the HTML of the ajax response with no CSS styling, JavaScript, or anything.

This apparently is a design change by the JQuery UI team. See below link: http://bugs.jqueryui.com/ticket/9363

This seems to me a common issue but I am unable to find any solutions. Any suggestions for a workaround or a fix?

A really good example to demonstrate this issue would be the JQuery UI Tabs Demo page: http://jqueryui.com/tabs/

Right click any tabs and select "open link in new tab".

Thanks for any help!

Answer 1

In beforeActivate event, for each tab, store href as data object then set href as aria-controls.

    $(ui.newTab).parent().find("li a").eq(i).data("href.tabs",$(ui.newTab).parent().find("li a").eq(i).attr('href'));
    $(ui.newTab).parent().find("li a").eq(i).attr('href', '#'+$(ui.newTab).parent().find("li").eq(i).attr('aria-controls'));

In activate event, for each tab, set value from data object as href.

    $(ui.newTab).parent().find("li a").eq(i).attr('href', $(ui.newTab).parent().find('a').eq(i).data("href.tabs"));