Question

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

Please see this image for 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 1

您的div正在按照您的定义完全插入。如果这是出乎意料的话，那么标签库引入的神奇酱料就不会出现，也许是因为它受到了最小下载策略的阻碍。

您可以尝试模拟标签库在幕后为您做的任何疯狂的事情，或者弄清楚为什么MDS会在图书馆中踩踏。

看起来您可以简单地指定在将div添加到页面时希望div具有的相应类名。

而不是：

$("<div id='G1'style='display:block;'>G1</div>").appendTo("#tabs");

你可以这样做：

$("<div id='G1' class='ui-tabs-panel ui-widget-content ui-corner-bottom'>G1</div>").appendTo("#tabs");

Answer 2

我找到了问题的根本原因。在调用“刷新”时选项卡的方法，它在内部检查创建选项卡的请求是否是同一页面中的远程选项卡或选项卡。为此，他们通过匹配添加的锚标记和document.url的URL来检查它。由于锚标记位于iframe内，因此url将是iframe内部调用的页面。启用MDS后，文档网址将包含＆＃39; / _ layouts / 15 / start.aspx＃＆＃39;。所以网址不匹配。＆＃39;刷新＆＃39;方法不会考虑为标签添加的锚标签，因此它将创建新的div。

解决方案：我已经覆盖了jquery选项卡的功能（函数名称是＆＃39; _isLocal＆＃39;），用于检查网址。

jquery tabs refresh creates dummy div

2 个答案: