Reputation: 4145
I am attempting to use some (simple) code to remove a JQuery UI tab that I had created dynamically. Unfortunately, it's not cooperating.
Here is the javascript method I'm using:
function removeTab(tabName) {
var tabIndex = -1;
$('#tabbedPanel > ul > li > a').each(
function(i) {
if (this.href == tabName) {
tabIndex = i;
}
});
$('#tabbedPanel').tabs("remove", tabIndex);
}
Unfortunately, all I get is "Object doesn't support this property or method". I'm sure that the tab index is correct.
Any help out there?
Upvotes: 3
Views: 2142
Reputation: 28711
Glad you got it working.
One suggestion - instead of looping through the tabs, you can use the tabs API to figure out the selected index of the tab and remove it a lot easier.
Here's a fiddle I put together (using the jQueryUI demo tabs with some enhancements).
The key part is using the 'selected' option. I have a button that, when clicked, will alert the selected tab index...
$("#get_index").click(function(e) {
e.preventDefault();
alert("Selected tab index = " + $("#tabs").tabs("option", "selected"));
});
I have a different button that, when clicked, will get the selected index and then use the 'remove' option to remove that tab. This way you don't have to match the href
name...
$("#remove_selected").click(function(e) {
e.preventDefault();
var selIndex = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("remove", selIndex);
});
Even though you solved your problem, I thought I'd share this. Hope it helps!!
Upvotes: 1
Reputation: 4145
It was a DOM problem. The jsp fragment that was being loaded had the head and body tags in it. I didn't immediately catch it because the addTab() method immediately above it worked fine.
Upvotes: 0