I am developing hybrid Mobile application by using intel xdk and jquerymobile for UI. i have an ajax form submission which means i have two logins so that i am using tabs(2). First we will take first tab, i just enter username,password and click button it will check whether the username and password is correct or not in Database(during checking process i am adding loader) if it is correct it will redirect into next page otherwise it will show error message. Everything is working fine
This is my html code
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" class="ui-btn-active" data-ajax="false">Pre-school</a></li>
<li><a href="#two" data-ajax="false">Daycare</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<div data-role="main" class="ui-content">
<form name="loginform" method="post">
<div id = "container">
<div class="ui-field-contain">
<label for="username">User name:</label>
<input type="text" name="usr" id="username">
<label for="password">Password:</label>
<input type="password" name="pword" id="password">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1" id="remember" class="custom" />
<label for="remember">Remeber Me</label>
</fieldset>
</div>
<button id="submit" >Login</button>
</form>
</div>
</div>
</div>
This is my javascript code
$(document).ajaxStart(function() {
$.mobile.loading('show',{
text: 'Loading...',
textVisible: true,
theme: 'a',
html: ""
});
});
$( document ).ajaxStop(function() {
$.mobile.loading('hide');
});
$(document).ready(function() {
var u = window.localStorage["username"];
var p= window.localStorage["password"];
$('#username').val(u);
$('#password').val(p);
$('#submit').click(function(){
un = document.loginform.usr.value;
pw = document.loginform.pword.value;
$.ajax({
type :'GET',
url :'http://example.com/login.php',
data : {username : un, password : pw},
beforeSend : function() {$.mobile.loading('show')},
complete : function() {$.mobile.loading('hide')},
success: function (data) {
sessionStorage.setItem('uname', un);
if ($('#remember').is(':checked')) {
var username = un;
var password = pw;
window.localStorage["username"]=username;
window.localStorage["password"]=password;
}
status = JSON.stringify(data);
var re = /[ ,]*"([^"]+)"|([^,]+)/g;
var match;
while (match = re.exec(status)) {
var text = match[1] || match[2];
$('ol').append($('<li>').text(text));
}
if(text === "1"){
window.location = "./homepage.html";
}
else if(text === "0"){
intel.xdk.notification.alert("Invalid username and password", "Error", "Ok");
}
else{
intel.xdk.notification.alert(text, "Error", "Ok");
}
}
});
});
});
My Problem:- Sending request to server and get response everything is working fine but my problem is when i click login button it is showing Error page Loading instead of my loader
My requirement:- When i click login button it should show loader instead of Error page Loading . i implemented loader but still it is showing "Error page Loading" i think this is some UI problem because my ajax code is working fine except this UI problem Could you please help me
