Tabs widget exhibits odd behavior when it's on a page that is linked to

[bkosborne]

A bit of a confusing title, sorry.

When a tabs widget is on a page, and I link to that page, it seems that the page is loaded twice. The second time it's loaded, almost the entire page is re-inserted into the DOM near the original tabs widget for the first page load.

Still confused?

Here's a working demonstration. Notice how the page loads twice when clicking the link. If you go to page2.html directly, there is no issue. Only when the page is loaded via AJAX thru JQM.

The example code is taken almost exactly from the docs page.

I thought maybe the navbar widget was causing some issues, so I removed that, but it makes no difference.

I have a stack overflow post as well as a jquery mobile forums post on the subject.

I'm either missing something very obvious, or I believe there is a bug in the implementation of the tabs widget or the documentation for the tabs widget.

[arschmitz]

@bkosborne thank you for reporting this. Can you please see our contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md and create a jsbin testpage demonstrating the issue. I took the liberty of creating one http://jsbin.com/ofuhaw/1190/edit and I don't see an issue I'm going to close this as incomplete and cant reproduce if you can post a simple jsbin testpage reproducing the issue we will reopen this

[bkosborne]

Hello,

I tried modifying the jsbin's, but linking from one jsbin to another doesn't seem to work right, unless I'm in the /edit context, which I don't believe is a true real world example.

Page 1: http://jsbin.com/ofuhaw/1196
Page 2: http://jsbin.com/ofuhaw/1195

You can see that clicking the link to page 2 doesn't load properly. Not sure what's going on there.

The markup is identical to the example I provided on my website except for the version of jQM used. I tried using the Git source one, but it does not resolve the issue.

[bkosborne]

Also please note that I made an effort to not "pollute" the same pages I made. I understand the benefit of having a jsbin available to test with, but my examples are clean and don't contain any unnecessary markup that could potentially interfere with the desired functionality.

[arschmitz]

@bkosborne the issue with the edit view is a know issue with jsbin returning json data in some ajax requests. The edit view is just an iframe and does not effect the example. I thank you for your attempt at making a clean test page this still only has limited usefullness we cant debug it because we cant make changes we cant change jquery versions or mobile versions this is why we use jsbin and the fact that it works in demos and jsbin but not your test page leads me to believe there is either an unseen issue with your page. I have even changed to match your page with 1.4.1 instead of master and I still see no issue http://jsbin.com/ofuhaw/1197/edit

[bkosborne]

@arschmitz,

I completely replaced my page1.html and page2.html with your examples, replacing only the link. The problem is still present on my pages (though note that theres a few issues with the markup, like duplicated ID's on the second page).

I cannot trust that jsbin is operating as a normal web page would. My environment is a vanilla apache web server and there is no special fetching or iframes included. I can't quite figure out how jsbin is retrieving the second page after analyzing Chrome devtools. I see a request is made to http://jsbin.com/ofuhaw/1198?0.5647212639451027, and the MIME type is text/event-stream, but I'm not sure what that means here? The response is blank as analyzed in the dev tools.

I urge you to please consider my example, or to quickly setup your own. I'm sure you have a local web server on your computer where you can simply place two HTML pages. I can't seem to get jsbin to work properly. I would be more trusting if I could view the standalone page and link to the other standalone page, without using that edit view.

[gabrielschulhof]

jsbin may not be able to accommodate retrieval via Ajax, but jsfiddle does.

[gabrielschulhof]

This is extremely weird. It seems to be running two copies of jQuery Mobile. After changing to page two, it starts executing a second copy of jQuery Mobile, because, after the transition to page 2 is completed, it adds ui-page-active to page 1. I added a DOM breakpoint after the transition completed to trap the moment when ui-page-active is erroneously re-added to page 1, and it turns out the ui-page-active class is being added from ... $.mobile.initializePage!

[gabrielschulhof]

OK. I've tracked it down to where tabs loads content. The variable response ends up containing the whole document from inside page2.html. Basically, tabs does not sanitize content the way jQuery Mobile does, by getting rid of the head. It simply places the whole shebang into an element, which is causing core to start evaluating the scripts it finds inside.

[gabrielschulhof]

Tracing further still, it turns out that "#one" isn't considered a local link at the time when the tabs' load() function gets called, because the native anchor.href returns the new URL (the URL of page2) instead of the old URL (the URL of page1), because the page load() happens before we navigate and thereby update the location.href.

Basically, isLocal() is consulting location.href, which in our case is not yet updated to reflect that page2.html is the current page.

[gabrielschulhof]

Once it decides that the anchor is not local, it Ajax-es in "#one", which basically ends up Ajax-ing in location.href + "#one", which means the page Ajax-es itself in.

[gabrielschulhof]

This also wouldn't work when pushState is not available, because in that case the location.href never changes.

[gabrielschulhof]

A possible solution would be to make the isLocal() function of the tabs widget an extension point, so we could override it in jQM. @scottgonzalez?