Nested bug (showing content from multiple tabs) about jquery-easytabs HOT 12 OPEN

I had the same issue at the start, I changed the order my scripts loaded, presto no more multiple tabs showing. I am running the website locally currently, and I expect once upload to the data-center it should function the same, if there is a timing issue in the loading of the scripts, I will simply reorder the loading of the scripts.

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
script src="js/jquery.easytabs.js" type="text/javascript"></script>
script type="text/javascript">$('#outer-container, #inner-container').easytabs();</script>
script src="js/jquery.hashchange.min.js" type="text/javascript"></script>

I tested for about 5 min flipping tabs outer and inter and couldn't cause the error again once I changed the script order.

Richard...

from jquery-easytabs.

Thanks for you answer.

It's definitely haschange.min.js that messes it up. I tried reordering the loading of the scripts, placing haschange.min.js last. I think it helped at first - the problem occurred less often, but it did happen sometimes. Now, it happens all the time. Not sure what I did. The HTML is 100% correct according to W3C HTML Validator and the jQuery seems correct as well...

I tried removing all other scripts, but the problem remains.

Finally, I removed haschange.min.js and disabled updateHash, which solved the problem, but it's still an issue since I would rather have it enabled... :/

from jquery-easytabs.

Hi,

If you change line 313, which is currently this:

if ( hash === '' || plugin.matchTab(lastHash).length || $container.closest(hash).length ) {

to

if ( hash === '' || plugin.matchTab(lastHash).length) {

The problem will go away (at least on my end). Say you have top-level tabs A and B, and B has nested tabs C and D. If you navigate to B and select a non-default tab (in this case, D), go back to A, and then go to B again, you'll see the content of the non-default tab (D) placed below the content in the default tab (C). Changing the code to keep the existing selection in the sub-tabs and not automatically move back to the default tab fixes the problem (and also is the behavior that I'd like).

from jquery-easytabs.

@jamenzin I understand what you're saying, the problem is that breaks back-button functionality for the first tab. I.e. you load the page, click tab B, then click back... nothing would happen.

from jquery-easytabs.

Hm, what you're saying seems to be true for the inner tabs, but the outer tabs still work. What if you make it so the hash is updated to the current tab when you enter the inner tabs?

from jquery-easytabs.

Not sure I follow. If I made the change you suggested then the outer tabs wouldn't work either for what I just described.

from jquery-easytabs.

Checking for nested tabs and manually hiding the active tab in this section of code seems to work. I see what you're saying about the back button functionality, etc., but we need some sort of workaround so content doesn't flow into the wrong pages (otherwise we can't use hashchange). There are probably better ways to do this with other EasyTabs functions as well. Thoughts?

        if ( hash === '' || plugin.matchTab(lastHash).length || $container.closest(hash).length ) {
          var subTabs = $(hash).find('[data-easytabs=true]');
          if (subTabs) {
            subTabs.find('div.' + settings.tabActiveClass).css('display', 'none');
          }
          skipUpdateToHash = true;
          plugin.selectTab( $defaultTabLink );
        }

from jquery-easytabs.

Experienced the same issue today and despite the suggested code above, still get the same issues..

One thing I'm unsure about is whether the code above will work given that there doesn't appear to be any indication of which tab-container is being referred to. I suspect that's more down to my lack of experience with Jquery & JS though.

Has anyone had any further thoughts on this problem?

from jquery-easytabs.

I am experiencing the same problems, I will try jamenzin suggestion. I will post here if it worked or not.

from jquery-easytabs.

I figured out a quick workaround that works like a charm, very simple and makes it work great. I know this is my first idea to fix the problem. I am sure that I will figure out something better eventually, but for all of you that have been breaking your heads trying to find the simplest workaround that works, here it is:

$('#nested-tab-3').click(function(){
  window.setTimeout('location.reload()', 500); 
});

Just do that with any selector that has nested tabs.

Fred.

from jquery-easytabs.

hey,
i am new to this blog guys and i am facing the same problem.
does anyone figure out any solution ?
regarding fcaceres solution : i tried to put it in my code but it didn't work :(

Can anyone help me with this ?

from jquery-easytabs.

same here... =( but i can't help, i'm a complete noob in jquery coding

from jquery-easytabs.