I am creating an application in phonegap using the jQuery mobile framework.
In my index.html file I have a two text boxes to accept username and password.
When I click on the submit button it calls a function submitBtn() that checks whether the username and password is correct or not and if it is correct then it should load a new html file that I have created `selectOption.html'
here is my code
<script type="text/javascript">
$(document).ready(function() {
var userName;
var userPassword;
$("#submitBtn").click(function() {
//alert("HI");
userName = $("#UserName").val();
userPassword = $("#Password").val();
if ((!UserName)|| (!userPassword)) {
alert("Enter the Details");
}
else {
if ((userName !="alpha") ||(userPassword !="beta")) {
alert('Enter correct username and password');
}
else {
//here i want to load my selectOption.html file ?
}
}
});
});
</script>
my code under <body> is
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Enter Credential</h1>
</div>
<div data-role="content">
<label for="UserName">User Name</label>
<input type="text" name="UserName" id="UserName" value="" style="width:220px;" />
<label for="Password">Password</label>
<input type="password" name="Password" id="Password" value="" style="width:220px;" />
<div id="submitBtn" data-role="button">Submit</div>
</div>
</div>
</body>
The function is getting called but how can I load the selectOption.html file?
I am creating an application in phonegap using the jQuery mobile framework.
In my index.html file I have a two text boxes to accept username and password.
When I click on the submit button it calls a function submitBtn() that checks whether the username and password is correct or not and if it is correct then it should load a new html file that I have created `selectOption.html'
here is my code
<script type="text/javascript">
$(document).ready(function() {
var userName;
var userPassword;
$("#submitBtn").click(function() {
//alert("HI");
userName = $("#UserName").val();
userPassword = $("#Password").val();
if ((!UserName)|| (!userPassword)) {
alert("Enter the Details");
}
else {
if ((userName !="alpha") ||(userPassword !="beta")) {
alert('Enter correct username and password');
}
else {
//here i want to load my selectOption.html file ?
}
}
});
});
</script>
my code under <body> is
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Enter Credential</h1>
</div>
<div data-role="content">
<label for="UserName">User Name</label>
<input type="text" name="UserName" id="UserName" value="" style="width:220px;" />
<label for="Password">Password</label>
<input type="password" name="Password" id="Password" value="" style="width:220px;" />
<div id="submitBtn" data-role="button">Submit</div>
</div>
</div>
</body>
The function is getting called but how can I load the selectOption.html file?
- When you say "load another file", do you mean "redirect to another file"? – CedX Commented Jan 4, 2012 at 14:01
2 Answers
Reset to default 5Have you tried using the jQuery Mobile method to perform navigation?
$.mobile.changePage("newpage.html");
http://jquerymobile./demos/1.0/docs/api/methods.html
I found the answer
to load any page you can simply do
$.mobile.changePage("yourHTML.html","slideup");