jQuery Mobile changePage not working <p>I'm trying to link to the following html page using </p> <pre><code>$.mobile.changePage( "myPage.html", { transition: "slide"} ); </code></pre> <p>However, it's not working. The page will load however the alert box with the spinning cirlce and "loading" message never disappears and the page never fully loads in its css content. Can anybody see why based on the above call and the html below? Thanks</p> <p><strong>HTML Page</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Sign up&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt; &lt;link rel="stylesheet" href="./signup.css"&gt; &lt;script src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt; &lt;script&gt; // Global declarations - assignments made in $(document).ready() below var hdrMainvar = null; var contentMainVar = null; var ftrMainVar = null; var contentTransitionVar = null; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Page starts here --&gt; &lt;div data-role="page" data-theme="b" id="page1"&gt; &lt;div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true"&gt; &lt;h1&gt;Classroom Tempo&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="" data-icon="" data-transition="fade" class="ui-btn-active ui-state-persist"&gt;Sign-In&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="survey_SignUp.html" rel="external" data-icon="" data-transition="fade"&gt;Sign-Up&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role="content" id="contentMain" name="contentMain"&gt; &lt;form id="form1"&gt; &lt;div id="optionSliderDiv" data-role="fieldcontain"&gt; &lt;label for="optionSlider"&gt;How Many Options?&lt;/label&gt; &lt;input type="range" name="optionSlider" id="optionSlider" value="2" min="2" max="25" data-highlight="true" /&gt; &lt;/div&gt; &lt;fieldset data-role="controlgroup"&gt; &lt;legend&gt;Numbers or Letters?:&lt;/legend&gt; &lt;input type="radio" name="numbersOrLetters" id="Numbers" value="Numbers" checked="checked" /&gt; &lt;label for="Numbers"&gt;Numbers&lt;/label&gt; &lt;input type="radio" name="numbersOrLetters" id="Letters" value="Letters" /&gt; &lt;label for="Letters"&gt;Letters&lt;/label&gt; &lt;/fieldset&gt; &lt;script&gt; $(document).ready(function() { // Assign global variables hdrMainVar = $('#hdrMain'); contentMainVar = $('#contentMain'); ftrMainVar = $('#ftrMain'); contentTransitionVar = $('#contentTransition'); sliderValue = $('#optionSlider'); surveyDescriptionVar = $('#SurveyDescription') form1Var = $('#form1'); confirmationVar = $('#confirmation'); contentDialogVar = $('#contentDialog'); hdrConfirmationVar = $('#hdrConfirmation'); contentConfirmationVar = $('#contentConfirmation'); ftrConfirmationVar = $('#ftrConfirmation'); inputMapVar = $('input[name*="_r"]'); hideContentDialog(); hideContentTransition(); hideConfirmation(); }); $('#buttonOK').click(function() { hideContentDialog(); //hidePasswordMisMatch(); showMain(); return false; }); $('#form1').submit(function() { var err = false; var passwordError = false; // Hide the Main content hideMain(); console.log(sliderValue.val()); // If validation fails, show Dialog content if(err == true){ console.log("we've got an issue"); showContentDialog(); return false; } $('input[name=OnOff]').each(function() { onOffValue = $('input[name=OnOff]:checked').val(); }) $('input[name=numbersOrLetters]').each(function() { numbersOrLetters = $('input[name=numbersOrLetters]:checked').val(); }) console.log(onOffValue); console.log(numbersOrLetters); // If validation passes, show Transition content showContentTransition(); // Submit the form $.post("http://url", form1Var.serialize(), function(data){ console.log(data); hideContentTransition(); showConfirmation(); }); return false; }); &lt;/script&gt; &lt;/div&gt; &lt;!-- page1 --&gt; &lt;!-- Page ends here --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>