我正在尝试使用链接到以下html页面
$.mobile.changePage( "myPage.html", { transition: "slide"} );
然而,它不起作用。然而,页面将加载带有旋转cirlce的警告框,“加载”消息永远不会消失,页面的css内容也永远不会完全加载。根据上面的调用和下面的html,有人能明白为什么吗?谢谢
HTML页面
<!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>
