jQuery Mobile doing ajax request for inline pages when passing parameters
For developing a web application I am using jQuery Mobile.
However, I recently ran into a problem when having multiple pages in a single HTML-file and trying to link to them:
- <div data-role="page" id="first">
<div data-role="header">
<h1>First</h1>
</div>
<div data-role="content">
Content of first page
</div>
<div data-role="footer" data-id="footer">
<div data-role="navbar">
<ul>
<li><a href="#first?foo=bar" class="ui-btn-active">First</a></li>
<li><a href="#second?foo=bar">Second</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h1>Second</h1>
</div>
<div data-role="content">
Content of second page
</div>
<div data-role="footer" data-id="footer">
<div data-role="navbar">
<ul>
<li><a href="#first?foo=bar">First</a></li>
<li><a href="#second?foo=bar" class="ui-btn-active">Second</a></li>
</ul>
</div>
</div>
</div>
As you can see, I am trying to pass parameters to the pages so the users can bookmark the individual pages. The actual version contains multiple links to the same page which only differ in the passed parameters.
However, when clicking on a link, jQuery Mobile shows the popup "Error loading page" while the debugger console shows a request being made to "second?foo=bar" for example.
This behavior is the same in FF 3.6.15 and Chrome 9.0.597.98.
Everything works fine when either moving the pages into their own HTML-files or when removing the parameters.
Nevertheless, I would like to take advantage from the shorter time between page switches when the pages are declared inline and my application is dependent on those parameters as it dynamically loads XML-files based on those page parameters.
Is this scenario unsupported? Are there any plans if it will be supported?
Or am I simply doing something wrong?
Thanks in advance for your answers!