Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Basic navigation broken on AJAX-loaded pages #2637

Closed
leopd opened this issue Oct 7, 2011 · 5 comments
Closed

Basic navigation broken on AJAX-loaded pages #2637

leopd opened this issue Oct 7, 2011 · 5 comments

Comments

@leopd
Copy link

leopd commented Oct 7, 2011

File1 has two links to file2 -- one with rel=external and one without. If you click the link without rel=external, even simple page navigation within page2 is busted. That is <a href="#page2">link</a> doesn't work when file2 is ajax loaded. It instead displays file1 again.

Busted in 1.0RC-1 and latest. IMHO this is basic functionality to be broken in a release candidate.

file1.html:

 <html>
 <body>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

  <div data-role="page" id="myPage">
    <h1>file1</h1>
    <a href="file2.html" rel="external">Go to file2 external link</a> or<br/>
    <a href="file2.html">Go to file2 w/ AJAX</a>
  </div>

 </body>
 </html>

file2.html:

 <html>
 <body>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

  <div data-role="page" id="myPage">
    <h1>file2</h1>
    <a href="#page2">Show page2 in file2</a>
  </div>

  <div data-role="page" id="page2">
    <h1>file2 page 2</h1>
  </div>
 </body>
 </html>
@nanomo
Copy link

nanomo commented Oct 7, 2011

Hi,

Try to change the id of the page < div data-role="page" id="myPage" > in file2.html to myPage2

@MauriceG
Copy link
Contributor

MauriceG commented Oct 7, 2011

Have you tried to use a unique id for all pages? The code above uses "mypage" in both files.

@leopd
Copy link
Author

leopd commented Oct 7, 2011

Changed myPage to myPage2 in file2. Same thing.

@leopd
Copy link
Author

leopd commented Oct 7, 2011

I guess this has been a known issue for months that's just not important enough to fix before release: #1995

This kind of landmine is frustrating enough to make me switch to sencha. JQM was supposed to be easy.

@johnbender
Copy link
Contributor

@leopd

Two quick notes:

  1. It will always be easier for us to address your issue if you provide a working sample via jsbin of jsfiddle. In this case I've created one myself: http://jsbin.com/osigow/4
  2. The documentation specifically states the a page loaded via ajax will only select the first data-role=page element to load into the: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-navmodel.html (Third paragraph from the top). The link in your second page expects that both data-role=page elements will be loaded and that the second will be "linkable". Please consult the documentation before filling a bug.

As to why its loading the original page on click and not displaying an error, we'll address that as a separate bug

[edit] link markdown

@rmilesson rmilesson mentioned this issue Oct 26, 2012
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@johnbender @leopd @nanomo @MauriceG