2013-05-01 73 views
0

我创建了一个phonegap android应用程序,里面有很少的HTML页面,并使用jquery ajax在服务器之间传输数据。 要在页面之间移动我正在使用jquery $ .mobile.changePage()方法。但是当我从索引页面(最初加载的URL)移动到另一个页面的页面后,该页面中的jquery方法无法工作。在HTMl页面之间移动电话

但是,当我最初使用java代码加载特定页面,

super.loadUrl("file:///android_asset/www/secondpage.html");它的功能很好。

我试着用, $.mobile.changePage("secondpage.html", { transition: "flip" });还有,

$.mobile.changePage("file:///android_asset/www/secondpage.html", { transition: "flip" }); 

既不为我工作。第一页

$(document).ready(function(){  
$('#submitbtn').click(function(){  
$vari = $('#signin').serialize(); 
alert($vari); 
$.mobile.loading("show"); 
$.get('http://192.**.**.**/~114178R/v_login/signin.php', $vari, 

      function(data){ 
       $('#result').html(data); 
       $.mobile.loading("hide"); 
      });    


      return false; 

}); 

//above part works fine. 
//Code to move to the second page. and it also moves. 
$('#signup').click(function(){ 
$.mobile.changePage("second.html", { transition: "flip" }); 

}); 

}); 

代码我重视的js代码的第二页,并在second.html的头宣布它。但在第二页JavaScript没有调用。但只是css文件正在加载。在本地主机上这个页面和JavaScript的功能很好。但在模拟器和设备问题发生。当我按提交按钮(部署后)它只刷新窗体。但是当我从java文件加载second.html作为索引页面时,它运行良好。

super.loadUrl("file:///android_asset/www/login.html"); // second page not works. 

super.loadUrl("file:///android_asset/www/second.html"); //second.html works well. 

HTML的second.html

<head> 
<!--<meta content="text/html; charset=utf-8" http-equiv="Content-Type">--> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Register</title> 
<script type="text/javascript" src="assets/jquery 1.8.js"></script> 
<script type="text/javascript" src="assets/jquerymobile.js"></script> 
<script type="text/javascript" src="js/register.js"></script> 
<link rel="stylesheet" href="assets/jquerymobile.css"></link> 


</head> 

<body> 
<script type="text/javascript" src="js/register.js"></script> 
<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true"> 
     <div data-role="header"> 
     <h1>Register</h1> 
     <a href="login.html" data-rel="back"></a> 
     </div><!-- /header --> 

     <div data-role="content" id="form"> 
     <form id="signup" method="post"> 

     <label for="basic">Your Name:</label> 
     <input type="text" name="urname" id="urname" data-mini="true" /> 

     <br> 

     <label for="basic">User Name</label> 
     <input type="text" name="uname" id="uname" data-mini="true" /> 
     <br> 


     <br> 
     <li data-role="fieldcontain"> 
       <label for="select-choice-a" class="select">Choose your position :</label> 
       <select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-theme="c"> 
        <option>New Team Member</option> 
        <option value="standard">Software Developer</option> 
        <option value="rush">Managerial Level</option> 
        <option value="express">Techlead</option> 
        <option value="overnight">Branch Manager</option> 
       </select> 
      </li> 
     <label for="basic">Password :</label> 
     <input type="password" placeholder="A-Z and a-z and 0-9" name="pw_1" id="pwi_1" data-mini="true"/> 
     <br> 
     <label for="basic">Enter password again :</label> 
     <input type="password" placeholder="A-Z and a-z and 0-9" name="pw_2" id="pwi_2" data-mini="true"/> 
     <br> 



     <input type="submit" id="submitbtn" value="Register Me" data-corners="true" data-shadow="true" data-iconshadow="true"> 
     <br> 

     </form> 
     <div id="result"></div> 
     </div><!-- /content --> 
     <br> 
     <br> 
     <div data-role="footer"> 
     <h4>Sign in to enjoy Rides!</h4> 
     </div><!-- /header --> 

    </div> 
</body> 

</html> 

的JavaScript register.js为second.html

$(document).ready(function() { 

    $('#submitbtn').click(function() { 
    alert("clicked"); 

    if(($('#pwi_1').val()!= "") && ($('#pwi_1').val()==$('#pwi_2').val())){ 
     alert("if"); 
     alert($('#pwi_1').val()); 

     $vari = $('#signup').serialize(); 
     alert($vari); 
     $.mobile.loading("show"); 
     $.get('http://xxx.xxx.xxx.xxx/register.php', $vari, 

      function(data){ 
       $('#result').html(data); 
       $.mobile.loading("hide"); 
      });    

     return false; 
    } 
    else { 
     alert("else"); 
     alert($('#pwi_2').val()); 
    } 
}); 
}); 
+0

你在第二页有一些javascript代码吗? – 2013-05-01 05:19:13

+0

是的,jQuery的方法来验证和提交表单在那里。 – Marlio 2013-05-01 05:29:38

+0

我认为它失败了,为了检查禁用这个代码,并尝试打开页面 – 2013-05-01 05:51:00

回答

1

也许你可以使用window.location.replace(登录。 HTML);

而当您使用Jquery时,请务必在您的所有页面中导入脚本。

希望它帮助;)

+0

我刚才发现,jquerymobile只能通过index.html的头部。因此,我需要使用$ .on()方法将第二页中的事件绑定到第一页。但没有任何想法如何去做,它会指导我在单个js文件中编写项目的整个js。那么对此有什么帮助..?我找到了这个。 http://stackoverflow.com/questions/14667420/javascript-not-working-in-second-html-file-in-phonegap-jquery-mobile?rq=1和 http://stackoverflow.com/questions/14468659/jQuery的移动文档准备VS-页面事件 – Marlio 2013-05-01 08:34:56

0
<script type="text/javascript" src="js/register.js"></script> 

把上面的代码你的页面中。

<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true"> 

<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true"> 
<script type="text/javascript" src="js/register.js"></script> 

脚本没有在本节只在一个页面refesh运行。