I’m trying to link to the following html page using
$.mobile.changePage( "myPage.html", { transition: "slide"} );
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
HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<link rel="stylesheet" href="./signup.css">
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
// Global declarations - assignments made in $(document).ready() below
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
</script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
<h1>Classroom Tempo</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="" data-icon="" data-transition="fade" class="ui-btn-active ui-state-persist">Sign-In</a></li>
<li><a href="survey_SignUp.html" rel="external" data-icon="" data-transition="fade">Sign-Up</a></li>
</ul>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<form id="form1">
<div id="optionSliderDiv" data-role="fieldcontain">
<label for="optionSlider">How Many Options?</label>
<input type="range" name="optionSlider" id="optionSlider" value="2" min="2" max="25" data-highlight="true" />
</div>
<fieldset data-role="controlgroup">
<legend>Numbers or Letters?:</legend>
<input type="radio" name="numbersOrLetters" id="Numbers" value="Numbers" checked="checked" />
<label for="Numbers">Numbers</label>
<input type="radio" name="numbersOrLetters" id="Letters" value="Letters" />
<label for="Letters">Letters</label>
</fieldset>
<script>
$(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;
});
</script>
</div> <!-- page1 -->
<!-- Page ends here -->
</body>
</html>
The
$.mobile.changePageAPI has undergone some changes from version 1.0 alpha 4 and 1.0.1 of jQuery Mobile. The syntax you are using with option object is of the newer version of jQuery Mobile (at least from 1.0.1).