MrNaiz MrNaiz - 1 month ago 16
jQuery Question

jquery tabs refresh creates dummy div

I am rendering HTML inside Sharepoint in an iframe. For rendering HTML I am trying to add a tab using jquery tabs.
Please see the code for adding tab.

$("<li><a href='#G1'>G1</a></li>").appendTo("#tabs > ul");
$("<div id='G1'style='display:block;'>G1</div>").appendTo("#tabs");
$.fn.fetchTabID = function(id) {
$("#tabs").tabs("option", "active", $('#G1').index() - 1);
};
$("#tabs").tabs('refresh');
$("#tabs").fetchTabID(tabid);


While calling
$("#tabs").tabs('refresh')
, the div
G1
is added as a normal div instead of tab.The issue was only when MDS is enabled in this Sharepoint site.Any help appreciated.

Please see this image for HTML at the time of issue
HTML at the time of issue

Please see this image for HTML when its working
HTML when its working

I am using jQuery version: 1.11.3 and Sharepoint 2013

Update: While I tested this in Chrome its working fine. I got the issue in IE 10

Answer

I have found out the root cause of the issue. While calling the 'refresh' method of tabs, its internally checking whether the request for creating tab is a remote tab or tab within the same page. For this purpose, they check it by matching the url of added anchor tag and document.url. Since the anchor tag is inside the iframe, the url will be of the page which is called inside iframe. When MDS is enabled the document url will contain '/_layouts/15/start.aspx#'. So the urls doesn't match. The 'refresh' method would not consider the added anchor tag for tab hence it will create new div.

Solution: i have overridden the function of jquery tabs(function name is '_isLocal') which is used for checking the urls.