How to change the URL after a navigation using jQuery Mobile's $.mobile.navigate <p>I'm new to jQuery Mobile and I've been trying so hard (been googling for 2 days straight) to understand how the navigation to external pages works but finding it really hard so hopefully I can get a proper explanation here. From my searches I've found the <code>$.mobile.navigate</code> function but I haven't quite figured out how exactly to use it. </p> <p>Basically what I have is a <code>login.php</code> page, after you successfully logged in you should be taken to the <code>homepage.php</code>, I've managed to make it so that the <code>homepage.php</code>'s content is shown, but when it comes to the URL I can see for a split second that it changes to <code>homepage.php</code> but immidiately changes back to <code>login.php</code>. How can I make it so that it stays on <code>homepage.php</code>? </p> <p>I navigate to <code>homepage.php</code> with <code>$.mobile.navigate</code> like so:</p> <pre><code>&lt;input type="submit" form="login-form" name="submit_login" value="Logga in" id="submit-login"&gt; $('body').on('click', '#submit-login', function() { $.mobile.navigate('../../includes/pages/homepage.php'); }); </code></pre> <p>And currently my <code>homepage.php</code> file looks like this:</p> <pre><code>&lt;div data-role="page" data-url="homepage" data-theme="b" id="homepage"&gt; &lt;div data-role="header"&gt;Some content here&lt;/div&gt; &lt;div data-role="main"&gt;Some content here&lt;/div&gt; &lt;div data-role="footer"&gt;Some content here&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I read somewhere that <code>data-url</code> is used for changing the url on navigation but I haven't been able to make any use of it from my attempts. </p>