jQuery mobile, login page reload needed for ajax to work

Question

I have a simple "login" form and ajax is working. But every time I load the page freshly in new tab, and "login" page loads, I input the username and password, press "login" button and for some reason page just reloads, but on the reloaded page when I press "login" button, ajax works just fine. Anyone know what does this mean?

Here is simple login form:

        <form id="login_form" name="login_form" data-ajax="false">
            <label for="basic">Username:</label>
            <input type="text" name="usr" id="usr" value=""/>
            <label for="basic">Password:</label>
            <input type="password" name="psw" id="psw" value=""/>
            <input type="submit" value="Login" id="login" name="login"/>
            <label><input type="checkbox" name="remember_me" id="remember_me" value="checked_remember"/>Remember me!</label>
        </form>
        <div id="login_message"></div>

And here is my ajax script:

$(document).ready(function(){
$("#login").click(function(){

username=$("#usr").val();
password=$("#psw").val();
$.ajax({
type: "POST",
url: "http://imes.jzpersonal.com/php/login_check.php",
data: "name="+username+"&pwd="+password,
success: function(html){
if(html=='true')
{
 $("#login_message").html("Logged in, congratulation.");
}
else
{
 $("#login_message").html("Wrong username or password");
}
},
beforeSend:function()
{
$("#login_message").html("Loading...")
}
});
return false;

}); });

Also I'm using POST method but I still get address in address bar like this:

http://imes.**********.com/login_page.php?usr=Jakub&psw=********&login=Login

Is this an jQueryMobile thing?

score 2 · Answer 1 · edited May 23 '17 at 12:12

Reason for this is you cant use $(document).ready(function(){ with jQuery Mobile. You should use :

$(document).on('pageinit'){

});

or if your page has an id then use it like this:

$('#page_id').on('pageinit'){

});

More info about this problem can be found here: http://jquerymobile.com/test/docs/api/events.html

Read this article to find more about this and jQM page events: https://stackoverflow.com/a/14010308/1848600

jQuery mobile, login page reload needed for ajax to work

1 Answers1