New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs not rendered properly when loaded from another file #7725

Closed
amasniko opened this Issue Sep 28, 2014 · 9 comments

Comments

Projects
None yet
3 participants
@amasniko

The application consists of two separate files, and the second file contains tabs (data-role=tabs). The tab contents are local (not loaded through Ajax) and referenced from the navbar links using "#id" notation. The first file contains a link to the file with local tabs. The second file is not rendered correctly because the tab content is ot recognised as local. At one point the code check if the link is local (isLocal function) which effectively Compares the URLs before the fragment part of the link and the current page ("location"). But at that point the "location" has not yet been updated (still points to the first page) and the link is mistankenly detected as non-local.

You can find the code for the first page at http://jsbin.com/huvoraba/146 and the second at http://jsbin.com/huvoraba/145. The first page also contains tabs just to prove that they do render correctly when defined in the same file.

Note that it does not properly work on jsbin site (it does not appear to load the secon page using Ajax mechanism) abd you ill have to copy the files locally.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Sep 29, 2014

Contributor

I can't reproduce this issue. I've copied the code you've supplied to jsfiddle, and I've updated the URL to correctly Ajax in the second page, because jsfiddle does not have jsbin's Ajax loading problems. The tabs widget works fine on both the first page and the second page. I cannot see any problems in the way it works.

http://jsfiddle.net/nc6j3ez1/1/show/light/

Contributor

gabrielschulhof commented Sep 29, 2014

I can't reproduce this issue. I've copied the code you've supplied to jsfiddle, and I've updated the URL to correctly Ajax in the second page, because jsfiddle does not have jsbin's Ajax loading problems. The tabs widget works fine on both the first page and the second page. I cannot see any problems in the way it works.

http://jsfiddle.net/nc6j3ez1/1/show/light/

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
Contributor

gabrielschulhof commented Sep 29, 2014

Here's a link without iframes: http://fiddle.jshell.net/nc6j3ez1/1/show/light/

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Sep 29, 2014

Contributor

OK, I spoke too soon. The second page was loading via HTTP, not Ajax.

Contributor

gabrielschulhof commented Sep 29, 2014

OK, I spoke too soon. The second page was loading via HTTP, not Ajax.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
Contributor

gabrielschulhof commented Sep 29, 2014

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Sep 29, 2014

Contributor

Additionally, there seems to be a navigation problem. Sometimes, when you click "Page 2", it jumps back to Page 1.

Contributor

gabrielschulhof commented Sep 29, 2014

Additionally, there seems to be a navigation problem. Sometimes, when you click "Page 2", it jumps back to Page 1.

@amasniko

This comment has been minimized.

Show comment
Hide comment
@amasniko

amasniko Sep 29, 2014

Hi Gabriel, the "navigation" problem may still be caused by the fiddle web site. For example, the pages keep flashing when I use your link. Ideally you want to run it on your own Web server where the environment would be clean. This is how I traced what is happening under a JS debugger. The call to isLocal on line 14750 incorrectly identifies the achor as non local because the "location" has not been switched at that point yet.

Thanks,
Marko

Hi Gabriel, the "navigation" problem may still be caused by the fiddle web site. For example, the pages keep flashing when I use your link. Ideally you want to run it on your own Web server where the environment would be clean. This is how I traced what is happening under a JS debugger. The call to isLocal on line 14750 incorrectly identifies the achor as non local because the "location" has not been switched at that point yet.

Thanks,
Marko

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Sep 29, 2014

Contributor

This is most likely related to #7169.

Contributor

gabrielschulhof commented Sep 29, 2014

This is most likely related to #7169.

gabrielschulhof added a commit that referenced this issue Sep 29, 2014

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725

@gabrielschulhof gabrielschulhof modified the milestones: 1.6.0, 1.5.0 Oct 27, 2014

@gabrielschulhof gabrielschulhof self-assigned this Oct 27, 2014

gabrielschulhof added a commit that referenced this issue Dec 5, 2014

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725

gabrielschulhof added a commit that referenced this issue Dec 29, 2014

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Jan 15, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Feb 12, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Mar 16, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Mar 18, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Mar 20, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Mar 27, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

gabrielschulhof added a commit that referenced this issue Apr 8, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jun 9, 2015

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727
@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jun 19, 2015

Member

This is fixed in 1.5-dev closing.

Member

arschmitz commented Jun 19, 2015

This is fixed in 1.5-dev closing.

@arschmitz arschmitz closed this Jun 19, 2015

@amasniko

This comment has been minimized.

Show comment
Hide comment
@amasniko

amasniko Sep 20, 2015

Sorry, but it appears the original problem is still present. If you try link from gabrielschulhof http://fiddle.jshell.net/nc6j3ez1/3/show/light/ and click on "Page 2" there, the content from both tabs will be displayed. As I mentioned earlier, "isLocal" function, now at line 14209, fails to identify the anchor as local. I have not debuged the simplified test case, but in my application it fails here:

return anchor.hash.length > 1 &&
    decodeURIComponent( anchor.href.replace( rhash, "" ) ) ===
        decodeURIComponent( location.href.replace( rhash, "" ) );

At this point "anchor" has the URL of the new page with "#" suffix identifying the local tab, but "location" has not changed yet (still refers to the first page) and the comparison fails.

Sorry, but it appears the original problem is still present. If you try link from gabrielschulhof http://fiddle.jshell.net/nc6j3ez1/3/show/light/ and click on "Page 2" there, the content from both tabs will be displayed. As I mentioned earlier, "isLocal" function, now at line 14209, fails to identify the anchor as local. I have not debuged the simplified test case, but in my application it fails here:

return anchor.hash.length > 1 &&
    decodeURIComponent( anchor.href.replace( rhash, "" ) ) ===
        decodeURIComponent( location.href.replace( rhash, "" ) );

At this point "anchor" has the URL of the new page with "#" suffix identifying the local tab, but "location" has not changed yet (still refers to the first page) and the comparison fails.

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 4, 2016

Tabs: Override _isLocal() to account for Ajax nav
We cannot compare hrefs to location.href

Fixes gh-7169
Fixes gh-7725
Closes gh-7727
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment