CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Gerardo
Gerardo

Reputation: 1948

Empty jQuery UI Tabs

How can I empty (remove all tabs) a jQuery UI Tabs?

EDIT: I'm not trying to remove the tab functionality, but to empty all tabs to add new ones.

I'm trying with:

for (var i = $('#content').tabs('length') - 1; i >= 0; i--) {
    $('#content').tabs('remove', i);
}

But tabs('length') always returns 0, even if there are some tabs added to the control.

BTW, I'm initializing it empty

$('#content').tabs();

and adding tabs dynamically afterwards

$('#content').tabs( 'add' , '' , data[i].nombre);

Upvotes: 1

Views: 7904

Answers (4)

k7p
k7p

Reputation: 41

I had a similar issue. In order remove tabs from a previous request before loading new tabs, I took these steps:

  1. removed the tabs (#tabs ul li),
  2. removed tab content (#tabs div) and
  3. refreshed the tabs.

Here is the code I used. Works for me. Hope it works for you.

$('div#tabs ul li').remove();
$('div#tabs div').remove();
$("div#tabs").tabs("refresh");

The other solutions I found posted on the web did not work for me.

Upvotes: 4

Keyslinger
Keyslinger

Reputation: 5274

I was having trouble iterating through the tabs and removing them all like you do in your question. My solution was to remove the 0th tab a number of times equal to the value returned by the "length" method of the tabs object:

var tab_count = $('#tabs').tabs('length');
for (i=0; i<tab_count; i++){
    $('#tabs').tabs( "remove" , 0 )
}

Upvotes: 6

Canton
Canton

Reputation: 807

Did you try adding tabs with non empty url?

$('#content').tabs( 'add' , 'non empty url' , data[i].nombre);

Copied from official documentation (http://docs.jquery.com/UI/Tabs#method-add)

.tabs( 'add' , url , label , [index] )

Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.

Upvotes: 2

Shaun Humphries
Shaun Humphries

Reputation: 1035

You should be able to just unbind the tabs from the selector.

$('#content').unbind();

EDIT:

Straight from jQuery Documentation

.tabs( 'destroy' );

Remove the tabs functionality completely. This will return the element back to its pre-init state.

Upvotes: 3

Related Questions