I'm creating a phonegap android application with few HTML pages inside it and using jquery ajax to transfer data between server. To move between pages I'm using jquery $.mobile.changePage() method. But after I moved to a page from the index page (initially loaded URL) to a another page, jquery methods in that page are not working.
But, when i load the particular page initially using the java code,
super.loadUrl("file:///android_asset/www/secondpage.html"); it functions well.
I tried with,
$.mobile.changePage( "secondpage.html", { transition: "flip" }); as well,
$.mobile.changePage( "file:///android_asset/www/secondpage.html", { transition: "flip" });
neither worked for me.
code on the first page
$(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" });
});
});
I attached the js code for the second page and declared it in the head of the second.html. but in the second page javascript is not calling. but the but the css files are loading. on the localhost this page and javascript functions well. but in the emulator and the device issue occurs. when i press the submit button (after deploying) it only refreshes the form. But when I load second.html as the index page from java file, it functions well.
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 for 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 for 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());
}
});
});
