Note that there are some explanatory texts on larger screens.

plurals
  1. POReloading dynamically generated page results in going back to first page, in jquery mobile
    text
    copied!<p>I am generating pages dynamically in a jquery mobile app. They show. The problem is that if the user hits the reload button on a dynamically generated page the will go back to the first page.</p> <p>Here is the example. Save the following file as t.html</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;JQM latest - issue template&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"&gt; &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"&gt;&lt;/script&gt; &lt;script&gt;$(document).ready(function(){ var newPage = '&lt;div data-role="page" id="dynamic"&gt;&lt;div data-role="header"&gt;&lt;h1&gt;Dynamic Page&lt;/h1&gt;&lt;/div&gt;&lt;div class="ui-content"&gt;&lt;ul&gt;&lt;li&gt;This page is dynamically generated.&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;'; $.mobile.pageContainer.append(newPage); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="homepage"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;Issue template&lt;/h1&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div class="ui-content"&gt; &lt;ul&gt; &lt;li&gt;We are on the Homepage&lt;/li&gt; &lt;li&gt;Go to &lt;a href="#static"&gt;static&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Go to &lt;a href="#dynamic"&gt;dynamic&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;div data-role="page" id="static"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;Static Page&lt;/h1&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div class="ui-content"&gt; &lt;ul&gt; &lt;li&gt;This page is in the index.html.&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Then</p> <ol> <li>Load t.html in the browser</li> <li>click on 'static', the URL will now be t.html#static and you will see that page</li> <li>Reload the page (click on the browser's reload page button), you will still see #static</li> <li>Go back to t.html</li> <li>Click on 'dynamic', the URL will now be t.html#dynamic and you will see that page</li> <li>Reload the page (browser reload button), you are now back at the homepage index.html, but the URL still shows t.html#dynamic</li> </ol> <p>How can I make it so that when the user reloads (step 6) the dynamic page we stay at that page?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload