Forgetting which tab was open

[miprogrammer]

My tabs come up in a modal box, and I want to always "forget" which tab was opened previously, and always show the first tab.

The problem is, I can't figure out how to do this. If I open the modal that the tabs are in, go to the 2nd tab, and then close it and re-open it, the 2nd tab is still visible. I realize this is how the software is intended to work. However, I tried to override the behavior with defaultTab, but no matter which ID I put in there, it's still loading up to the 2nd tab.

Is there a way to "forget" which tab was visible and force the 1st tab to open?

[DaAwesomeP]

Yes. Simply switch the tab when the modal box is called. Look at the public methods (http://os.alfajango.com/easytabs/#public-methods) and and insert the code inside the function for opening the modal. Even better, you can have it switch when closing the modal, so you won't ever see it switch as the modal is opening. Use an event hook of the modal instead of the function if it supports it. I don't know if you're using jQuery UI or something else, so I don't know for sure.

[miprogrammer]

Thanks a lot for taking the time to help. I didn't look at the select method before. To be clear, this has to be implemented after the tabs have loaded... is that correct? The problem with integrating it in to the code for opening/closing the modal is that code is very generic for my entire site. It is hard for me to add things to the code for rendering/hiding the modal.

I find it hard to believe that I can't select a tab to force display upon loading easytabs?

[DaAwesomeP]

It sounds like you are trying to creating the tabs when the modal opens and then recreate them when it reopens. What you want to so is create them when it opens and then destroy them when it closes. Easytabs does not have this feature. You should create the tabs not in any function or onLoad or $(document).ready event, etc. Just call the tabs once on your page.

In order to bind the switching of the tabs to your modal, you could try binding the switch function to whether or not the the modal div is visible:

$('#modal').bind('isVisible', isVisible) {
     $('#tabs').easytabs('select', '#nested-tab-3');
}

Taken from: http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible

[DaAwesomeP]

Oops, GitHub bug wouldn't let me edit it again. This is the correct code:

$('#modal').bind("isVisible", function() {
     $('#tabs').easytabs('select', '#nested-tab-3');
});

Originally taken from (then edited): http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible

Try it out and see if it works. There are other .bind() events and even alternatives to .bind() in jQuery. Google search it.

[miprogrammer]

Thanks again for your help.

It sounds like you are trying to creating the tabs when the modal opens and then recreate them when it reopens. What you want to so is create them when it opens and then destroy them when it closes. Easytabs does not have this feature"

You are correct, that is basically what I am trying to do.

You should create the tabs not in any function or onLoad or $(document).ready event

Don't I need to have the call to easytabs within a $(document).ready area? I thought that is how jquery worked. I was hoping this would be a simple thing I was overlooking but it looks like the functionality I am looking for is not a part of the package. If it's too complicated to get it going, I might just leave it. Still, it's a great script!

[DaAwesomeP]

Many jQuery libraries do not need to be in a $(document).ready() because when $ is called, jQuery passes on the .easytabs() to the Easytabs library.

Don't leave yet! How do you open your modal? Do you use the onClick event on a link or button? You just need to find a way to switch the tab before it opens if you don't want to get too complicated.

[miprogrammer]

The modal is qtip, it gets loaded from a link like this:

$("#show_modal_with_tabs").click(function () {

    var qtip = $(this);
    $(document.body).qtip( $.extend({}, common_modal_variables, { 

Then that takes a ajax request from a separate page with all the code in it. Right now, the ajax page this modal is calling loads the javascript libraries for easytab. Here is the javascript loaded when the modal pops up:

$(document).ready(function(){

      $('#tab-container').easytabs();

I know you said take it out of document.ready but that didn't seem to help any. Basically what your saying is use the public "select" method to switch the tab each time the modal is displayed? Where would I put this code?

Thanks so much for your help.

[DaAwesomeP]

To be safe, you should have the tabs switch at document ready and at modal opening.

Modal opening:

$("#show_modal_with_tabs").click(function () {

   $('#tab-container').easytabs('select', '#tab-1');

    var qtip = $(this);
    $(document.body).qtip( $.extend({}, common_modal_variables, { 

Document Ready:

$(document).ready(function(){

      $('#tab-container').easytabs();
      $('#tab-container').easytabs('select', '#tab-1');

I would also keep the defaultTab settingsfor the tabs. Be sure to change #tab1 to whatever the id of your tab is.

[miprogrammer]

DaAwesomeP,

Thanks for the hint. But the problem is on the initial load. In your "modal opening" example, tab-container doesn't exist until the modal is displayed. So that gives a javascript error. I can put it after the qtip is loaded, and it works... but...

If I open the modal and then select a different tab, and then close the modal... then re-open it, no matter what I do it's always loading the last tab I was looking at. Is this because easytabs is still "in memory", and I've just hidden it for the time being? When the modal is displayed next, it's as if the javascript portion isn't even being ran because it's already running.

Does this sound right?

[DaAwesomeP]

Yes, it is still running and "in memory." You need to fire the tabs at document ready and just hide them until the modal opens. Do not load them when the modal opens. Then you also need to have the tabs switch each time the modal is opened.

Document ready loads when the document has gathered all information from the server and is ready for action. Putting it in another event voids that. You need to have the document ready separate from the modal.

[miprogrammer]

Yes, it is still running and "in memory." You need to fire the tabs at document ready and just hide them until the modal opens. Do not load them when the modal opens. Then you also need to have the tabs switch each time the modal is opened.

Document ready loads when the document has gathered all information from the server and is ready for action. Putting it in another event voids that. You need to have the document ready separate from the modal.

Thanks again for help. Hiding the easytabs in a hidden div and then using that as my modal contents would solve the problem, but I have a fear of hidden div's, and it also makes for slower page loading. Yes, I know it may be the proper way to do things in this instance, but my modal's load there own javascript and css. I use a lot of modals and my pages would be a mess if they were all hidden div's.

I am hoping a future version of easytabs would have the ability to destroy. On closing the modal, I could easily add a line to destroy any easytabs. This would solve my problem, wouldn't it? If I dug around, I could probably find a way to destroy it myself... but it would take me hours and hours.

I saw the author post on another issue asking for some additional public methods. Hopefully he can continue to expand on this great project :) I for one would definitely be willing to contribute for his efforts!

Still, this is a very very good script and I appreciate you helping me. I might be in a holding pattern on this issue until I can get around to figuring out or maybe we see a new version.

[DaAwesomeP]

Yes, I made #133 and am hoping for those features too. However, they cannot be worked on until all of the current bugs are smoothed out. I (like many other people using this scripts) have very limited JavaScript capabilities and would never be able to create those public methods.

You might try experimenting with the jQuery UI Tabs, but the CSS gets messy. However, it is worked on by many more people and all of your problems should be answered. It is also much faster and lightweight. You can even customize the download to only include the scripts you want.

Good luck! :smiley:

[JangoSteve]

@DaAwesomeP Thanks for helping with this.

Just FYI though, jQuery UI Tabs isn't lighter weight (and I'm not sure what you mean by faster). If you're only using UI Tabs from the jQuery UI library, you still have to download jQuery UI, which makes it a heavier weight solution than easytabs. Of course, if you're already using jQuery UI for other stuff, then yes, the UI Tabs script is smaller since some of the core is contained in the UI core library.

I do appreciate all the feedback you've given in the issues. And I assure you, I will be catching back up to these issues soon. I have a rewrite planned for easytabs to make the source a bit better organized and more efficient. Once I do that, it will be trivial to add the public methods.

[miprogrammer]

Just FYI though, jQuery UI Tabs isn't lighter weight (and I'm not sure what you mean by faster). If you're only using UI Tabs from the jQuery UI library, you still have to download jQuery UI, which makes it a heavier weight solution than easytabs. Of course, if you're already using jQuery UI for other stuff, then yes, the UI Tabs script is smaller since some of the core is contained in the UI core library.

I do appreciate all the feedback you've given in the issues. And I assure you, I will be catching back up to these issues soon. I have a rewrite planned for easytabs to make the source a bit better organized and more efficient. Once I do that, it will be trivial to add the public methods.

@JangoSteve , First of all thanks for a great script. I struggled with tab scripts until I found yours. I tried jQuery UI tabs and much preferred yours. One of the reasons was because of what you mentioned, I didn't need all the features so it was really bloated. I didn't care for the UI styles and the css was pretty messy (like @DaAwesomeP said). Yours was so simple to style. Anyway, hope you get around to doing an update to easytabs. Where can I contribute? I know you run a business, but that doesn't mean I can't buy you a few beers!

[miprogrammer]

I really need a way to "kill" the tabs so that if I reopen them, I can re-use with a different default.

[miprogrammer]

I dug in to the code a little bit and figured something out. The only thing that is remembering which tab is open is the anchor in the URL, it appears. If I remove the anchor being used, It works like I want.

This is a crude fix for now, hoping the author can help me out. But I changed this:

window.location.hash = '#' + $targetPanel.attr('id');

to this

window.location.hash = ''

Like I said, crude but for now it works. Why the anchors anyway? Is it so users can use the back button? Hope you can shed some light on it! And thanks again for your work.