Recently, I have been working on creating a simple login form with username and password fields using jQuery Mobile. The validation for the username and password is supposed to be done through an ajax page. Surprisingly, everything was working perfectly fine in my system - I was able to receive responses without any issues. However, when I tried converting my code into a .apk file using PhoneGap and running it on my mobile, I encountered an issue. It seems like my mobile is unable to receive any response from the ajax page. Strangely, instead of executing the code inside the success function, it directly moves to the error function. Can anyone point out what could possibly be going wrong here?
$(document).on('pagebeforeshow', '#login', function(){
$(document).on('click', '#submit', function() {
if($('#username').val().length > 0 && $('#password').val().length > 0){
$.ajax({
url : 'liveurl/check.php',
data: {action : 'login', formData : $('#check-user').serialize()},
type: 'post',
beforeSend: function() {
$.mobile.loading(true); },
complete: function() {
$.mobile.loading(false);
},
success: function (result) {
if(result.status == "success"){
resultObject.formSubmitionResult = result.uname;
localStorage["login_details"] = window.JSON.stringify(result);
$.mobile.changePage("#second");
}else{
$.mobile.changePage("#login");
alert("incorrect login");
}
},
error: function (request,error) {
alert(error);
}
});
} else {
alert('Fill all necessary fields');
}
return false;
});
});