jQuery Mobile的changePage不工作

我试图使用jQuery Mobile的changePage不工作

$.mobile.changePage("myPage.html", { transition: "slide"});

但是链接到下面的html页面，它不工作。该页面将加载带有旋转圆圈的警告框，并且“加载”消息从不消失，并且该页面从未完全加载其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>

来源

2012-07-23 Apollo

你可以使用最新的jQuery Mobile吗？我有一种感觉，旧版本不支持选项对象。 – nhahtdh 2012-07-23 04:41:17

你为我节省了很多时间。请将此添加为答案，以便我可以很乐意将upvote/mark标记为答案。 – Apollo 2012-07-23 05:01:11

的$.mobile.changePage API经历了从版本1.0的α4和jQuery移动1.0.1一些变化。与选项对象一起使用的语法是jQuery Mobile的新版本（至少从1.0.1开始）。

来源

2012-07-23 05:06:36 nhahtdh

jQuery Mobile的changePage不工作

回答

相关问题