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不工作

回答

相關問題