You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

how do I force tabs re-initialize? Created May 13, 2010

This thread is solved

Views: 4554     Replies: 15     Last reply Nov 24, 2011  
You must login first before you can use this feature

myusername

Posts: 21

Registered:
Jan 11, 2010

how do I force tabs re-initialize?

Posted: May 13, 2010

Hi,

How can I force the tabs plugin to re-initialize? I am trying to dynamically add tabs depending on user actions, but I cannot figure out how to get the tab/pane added via script to register properly. I am modifying jasonpinder's original post from here:http://flowplayer.org/tools/forum/25/39097

I start with something like this:

<div id="tabdiv">
	<ul class="tabs">
		<li>
			<a href="#">
				tab1
			</a>
		</li>
		<li>
			<a href="#">
				tab2
			</a>
		</li>
	</ul>
	<div class="panes">
		<div>
			pane1
		</div>
		<div>
			pane2
		</div>
	</div>
</div>

Then I do the tabs

$("#tabdiv ul.tabs").tabs("div.panes > div");

I don't think it matters, but my tabs are also in an jquery tools overlay.

Now when I do:

$("#tabdiv ul.tabs").removeData("tabs");//without this, the tab isn't clickable
$("#tabdiv ul.tabs").append('<li><a href="#">tab3</a></li>');
$("#tabdiv div.panes").append('<div>pane3</div>');
$("#tabdiv ul.tabs").tabs("div.panes > div");

I get the tab added in and I can click it, but when I click a different tab the new tab3 keeps the "current" class and the pane3 does not get display:none; and stays visible underneath the opened tabs.

Here are some picture links to demonstrate (I got rid of the content in the tabs so it is easier to look at):

This is how they are originally created
http://img339.imageshack.us/i/tabsinitial.png/

This is after creating the third tab
http://img230.imageshack.us/i/tabsdynamicadded.png/

This is after opening the third tab and then opening another one
http://img197.imageshack.us/i/tabsbroken.png/

myusername

Posts: 21

Registered:
Jan 11, 2010

» how do I force tabs re-initialize?

Posted: May 17, 2010

Reply to: how do I force tabs re-initialize?, from myusername
can anyone help me with this please?

jeremyBass

Posts: 49

Registered:
Apr 21, 2009

For real.. how do we re-initialize? solve like 10 post with this one!!!

Posted: May 17, 2010

Reply to: » how do I force tabs re-initialize?, from myusername
if someone with intamint knowlage of the tab could get this one question.. it'd solve like 10 post list in the forum area right off the bat..

I know I have been trying for a bit now.. it should not be this hard.. ;)

Overload please ring in on any one of the re-initialize/or toggle tab post.. everyone will be happy.. :D

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » how do I force tabs re-initialize?

Posted: May 19, 2010

Reply to: » how do I force tabs re-initialize?, from myusername
try like this:


$(".tabs").data("tabs", null).tabs({
 // configuration
});

myusername

Posts: 21

Registered:
Jan 11, 2010

» » » how do I force tabs re-initialize?

Posted: May 20, 2010

Reply to: » » how do I force tabs re-initialize?, from tipiirai
I just saw this now, so thanks for the response Tero. I was not sure if it was currently possible to do what I was trying to do so I went a different direction with my coding. I will try to test this soon and post back.

jeremyBass

Posts: 49

Registered:
Apr 21, 2009

» » » how do I force tabs re-initialize?

Posted: May 20, 2010

Reply to: » » how do I force tabs re-initialize?, from tipiirai
I tryied it.. it didn't seem to re-initialize... here is what I have.


function initTabs(){

if($(".cal-upcominglist").length>0){
		$(".cal-upcominglist").data("tabs", null).tabs(".cal-upcominglist div.calendar-details",{
				tabs: '.acordHandle',
				effect: 'slide',
				initialIndex: null,
				onClick : function(event,index) {

					$(".acordHandle.opened").removeClass("opened").addClass('close').text('view details');
					$(".acordHandle.current").addClass('opened')
						.text('hide details');
						
					var CurrentTab= this.getCurrentTab();
					CurrentTab.text('hide details');
					//title=CurrentTab.siblings('eventTitle').text();
					//_tracker._trackEvent("Calendar", "Event", title);
					evenCol();
				}
		});

	}
}

$(document).ready(function(){
	evenCol();
	initTabs();
	setTimeout(evenCol, 500);
	setTimeout(evenCol, 1000);
		$(".cal-upcominglist div.calendar-details").hide();
		
		
		//Slide up and down on click
		$(".acordHandle.current.opened").live('click',function(){

				$(".cal-upcominglist div.calendar-details").slideUp("slow");
				evenCol();
				$(".acordHandle.opened").text('view details')
					.removeClass("current")
					.removeClass("opened")
					.addClass('close');
//$(".cal-upcominglist").removeData("tabs");
initTabs();
		});

});
You can see it here... This should toggel the tab by way of re-initialize... ideas?
http://www.shopsatliberty.com/special-events.html

jeremyBass

Posts: 49

Registered:
Apr 21, 2009

» » » » how do I force tabs re-initialize?

Posted: May 27, 2010

Reply to: » » » how do I force tabs re-initialize?, from jeremyBass
bumpiedy .... anyone get it to work?

$(".tabs").data("tabs", null).tabs({
// configuration
});

didn't seem to work.. you can see I did try .removeData("tabs");

@myusername any luck?

Cheers- Jeremy

myusername

Posts: 21

Registered:
Jan 11, 2010

» » » » » how do I force tabs re-initialize?

Posted: May 28, 2010

Reply to: » » » » how do I force tabs re-initialize?, from jeremyBass
@jeremyBass

I did not mess with it after you said you couldn't get it to work. I had already chosen to go a different direction with the way I was presenting the information. Sorry for being no help.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» how do I force tabs re-initialize?

Posted: Jun 7, 2010

Reply to: how do I force tabs re-initialize?, from myusername
Maybe something like this:


// clear tabs
$(".mytabs").removeData("tabs").find("a").unbind("click");

// re-initialize
$(".mytabs").tabs(".mypanes > div");

noticed that the possible event listeners are still there.

does this help? If not I guess I need to make some standard way of cleaning the tools.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» how do I force tabs re-initialize?

Posted: Jun 11, 2010

Reply to: how do I force tabs re-initialize?, from myusername
This feature will now be officially supported in 1.2.3. You can do for example following


// initialize tabs just like before
$("ul.tabs").tabs(".panes > div");
	
// add new tab/pane combination
$(".css").append('<li><a href="#4">Dynamically added tab</a></li>');
$(".panes").append("<div>llkjl kjlk jlkj lkj lkj lk jlk</div>");

// re-initialize and the new tab will work	
$("ul.tabs").tabs(".panes > div");

Additionally a new destroy event was added to completely remove tabs. This new version is already on GitHub. Here is the commit for this change:

http://github.com/jquerytools/jquerytools/commit/66dc54834ed24255f7e116ae87d31697cb37b757

myusername

Posts: 21

Registered:
Jan 11, 2010

» » how do I force tabs re-initialize?

Posted: Jun 13, 2010

Reply to: » how do I force tabs re-initialize?, from tipiirai
That is awesome news. Thanks!

Woet

Posts: 3

Registered:
Aug 23, 2010

» » how do I force tabs re-initialize?

Posted: Aug 23, 2010

Reply to: » how do I force tabs re-initialize?, from tipiirai
And now make it for tooltips..

ilant20

Posts: 1

Registered:
May 27, 2011

» » how do I force tabs re-initialize?

Posted: May 27, 2011

Reply to: » how do I force tabs re-initialize?, from tipiirai
destroy() method doesnt unbind the "click" events from "next-prev" buttons, so then you re-initialize the tabs api, clicking them runs the onclick event as many times as tabs are re-initialized

I had problem with this and OnBeforeClick event on the tabs.

•