Adding tab tools dynamically in version 1.2.5

[tslatt]

I'm using the latest version of easyUI, 1.2.5, which has the ability to add tiny tools to the tab itself. This is a very helpful addition. However, I can only get this to work if the tab is added within the html, not when the tab is added dynamically.

For example, this works:
<div title="Tab1" tools="#p-tools">test</div>

But this doesn't:
$('#main-tab-bar').tabs('add',{ title:"Tab1", content: "test", tools: "#p-tools" });

How can the new tab tools feature be used on dynamically created tabs?

[stworthy]

When tools '#p-tools' has be used in 'Tab1' panel, it cannot be used in other panel again. Remove tools from 'Tab1' panel and below code will run fine.
$('#main-tab-bar').tabs('add',{ title:"Tab1", content: "test", tools: "#p-tools" });

[tslatt]

I didn't mean to imply that I tried both methods at the same time. I've already tried the dynamic method without using the static method. It did not work. The div that contained the tab tools never got moved into the tab header. Do you have a working example of adding the mini tools to a tab that is created dynamically?

[stworthy]

Below is the example for adding tab tools dynamically:

http://www.jeasyui.com/easyui/demo/tabs.html

[tslatt]

Thanks for the link to the example, but that example only shows adding a tab dynamically, while the mini tab tools are static on the page. I am also creating the div that holds the mini tab tools dynamically.

However, I did finally get it working. Hopefully my code can help someone else.

Note: This code not only creates the tab and its mini tab tools dynamically, but it also adds a hidden unique id to the tab title, to get around the problem of using the tab title to identify tabs, when titles might not be unique in themselves.

Code:

tabTitle = tabName + "<strong>" + tabID + "<\/strong>"; //append a unique id to the title inside a strong tag, so that tab titles are unique. the css hides the <strong>.
tabContent = "mypage.asp?id=" + tabID;
tabIcon = "icon-reps-profile";
tabClose = true;
var tabTools = "tab-tools-" + tabTitle.replace(/[^\w]/g, '').replace(/strong/g, ''); //create the unique id for the mini tab tools by removing everything from the tab title that is not a letter, number, or underscore
var tabToolsDiv = "<div id='" + tabTools + "'><a href='javascript:void(0);' class='icon-mini-popup' onclick='javascript:popTab(\"" + tabTitle + "\");'><\/a><\/div>"; //create the div for the mini tab tools (a popup icon that calls the script to pop up this tab in a new window)
$('#main-tab-tools').append(tabToolsDiv); //add the mini tab tools div to the page
tabTools = "#" + tabTools;//specify the id of the mini tab tools
$('#main-tab-bar').tabs('add',{ //add the new tab
  title: tabTitle,      //unique tab title
  href: tabContent,     //url to load via ajax
  cache: true,          //cache the content so the tab doesn't reload it every time this tab is selected
  iconCls: tabIcon,     //tab icon
  closable: tabClose,   //whether to show the close button on the tab
  tools: tabTools,      //which div holds its mini tools (popup icon)
  selected: true        //whether this tab should be selected after it is added
});//end add the new tab

[tslatt]

I found one more thing that is needed with this. When the tab is created, the mini tools are moved from the within "tabToolsDiv" and placed within the tab, leaving an empty div. Because of this, if I close one of my tabs and then re-add it later, there are now two divs on the page with the same id "tabTools". It tries to pull the mini tools from the first instance it finds, which is empty. Therefore the mini tools aren't added to the tab. To fix this, this line of code goes immediately after what I posted above:

$(tabTools).remove();//remove the empty div