Activate tab fires twice with AJAX tabs, cache set to false

[bknoles]

I've got AJAX'd tabs up and running in my project, but I'm having a weird issue where the tab loads twice when the link is clicked. Using the chrome developer tools, it looks like the second call is due to a hash change.

Here is the original call stack:

jQuery.ajaxTransport.send                                        jquery.js:8103
jQuery.extend.ajax                                               jquery.js:7581
jQuery.fn.extend.load                                            jquery.js:7024
$.easytabs.activateTab                                   jquery.easytabs.js:546
$.easytabs.plugin.selectTab                              jquery.easytabs.js:213
$.easytabs.bindToTabClicks                               jquery.easytabs.js:470
jQuery.event.dispatch                                            jquery.js:3257
jQuery.event.add.elemData.handle.eventHandle                     jquery.js:2876

The second call stack is this:

jQuery.ajaxTransport.send                                        jquery.js:8103
jQuery.extend.ajax                                               jquery.js:7581
jQuery.fn.extend.load                                            jquery.js:7024
$.easytabs.activateTab                                   jquery.easytabs.js:546
$.easytabs.plugin.selectTab                              jquery.easytabs.js:217
$.easytabs.plugin.selectTabFromHashChange                jquery.easytabs.js:297
$.easytabs.initHashChange                                jquery.easytabs.js:637
jQuery.event.dispatch                                            jquery.js:3257
jQuery.event.add.elemData.handle.eventHandle                     jquery.js:2876

My js to initialize the easytabs is just

$('#maintabs').easytabs({
  panelContext: $('div#content'),
  cache: false
});

To load the html content, my backend is RoR, and each tab has a link to a controller action that renders an html file without a layout. I can post more details if necessary.

I have the haschange library also, and the back-forward behavior works fine. It reloads the tab once, as expected.

Any idea why this would happen?

[JangoSteve]

You're not using :remote => true on the ajax tab links, are you?

[bknoles]

No, no :remote => true option on the links. I set updateHash: false in the easytabs options and now the load only happens once. It seems that easytabs selects the tabs on click and then again once it detects the history hash change.

For me this solution is ok, but it does come at the cost of not being able to bookmark any of the content tabs. Here's my rails link for one of the tabs:

<%= link_to "Today", {:action => 'showtoday'}, 'data-target' => "#maintabs-1", title: "Today" %>

Maybe it is because my href routes dynamically through the controller instead of a static page?

[JangoSteve]

That's weird, there is a variable called skipUpdateToHash, which prevents this. The controller vs. static page shouldn't change anything.

Can you bind to the easytabs:before event hook of the tab container to see if that is being triggered once or twice?

$('#maintabs').bind('easytabs:before', function() {
  console.log('before hook fired!');
});

[bknoles]

It triggers twice when updateHash: true is in the options, according to the console

[JangoSteve]

Hmm, that's not right. And it's definitely not happening for any of the tabs on the demo/docs page. The only thing I could think of that would cause that is if the hashchange plugin is being included in the page twice.

[bknoles]

The source for the page only shows it included once. I searched through the other js files in the stack to make sure that they don't have the hashchange defined, and I couldn't find anything

I thought for a second that maybe my main js file was included twice (calling easytabs twice on the container), but logging shows it is only called once.

Any other things I can check?

[JangoSteve]

Yeah I wouldn't think that'd it'd be due to easytabs being included twice, because if that were the case, then you'd still see it firing twice even when updateHash was turned off. You're not including both the hash-change plugin and the address plugin are you? Or either of the above along with backbbq?

[bknoles]

I don't have the address plugin... here's the list of what I have

jquery.js
jquery_ujs.js
jquery.purr.js
best_in_place.js
jquery.jeditable.mini.js
jquery.jeditable.checkbox.js
on_the_spot_code.js
on_the_spot.js
jquery-ui-1.8.16.custom.min.js
jquery.ba-hashchange.js
jquery.easytabs.js
jquery.iframe-transport.js
jquery.remotipart.js
jquery.spin.js
mainpage.js
spin.js
myapplication.js

myapplication.js is the application.js file

[JangoSteve]

Remotipart, nice :-)

But yeah, I honestly have no idea what's going on.

[bknoles]

haha yea you've made my life pretty easy.

I'm going to just turn off the updatehash. If I decide i really need the back button functionality, I'll revisit.

Thanks for your help!

[JangoSteve]

You don't have a live demo, do you?

[bknoles]

No live demo right now... Everything is running on my local machine

[AnrietteC]

Can I just say, I had EXACTLY the same issue and I solved it by commenting the following line out:

296: plugin.selectTab( $tab );

After that, it seemed to load much smoother and not blink and the hash still changes.

[joebernard]

I found the issue. On line 466, make the following change:

skipUpdateToHash = true;

It was previously set to false. This will prevent EasyTabs from reloading after a hash change.

[joebernard]

Also note that this issue only occurs when cache = false and updateHash = true. All your demos seem to be cached, which is why they don't display the error.