Question

I have a simple login form. 2 php files, mobile.login.php and mobile.home.php. You log in and if the cookie is set you can now access home. The login system works but the page will not change to mobile.home.php, it just shows the login form again. The form is Ajax and here is the code:

<script type="text/javascript">
$('#login').live('pageinit', function() {
    $('form').live('submit', function(e){
        e.stopPropagation();
        e.preventDefault();

        $.post($(this).attr('action'), $(this).serialize(), function(data){
            if(data.success) {
                //$.mobile.changePage($('#home'), { transition: 'slideup'});
                $.mobile.changePage('mobile.home.php', 'slide', false, true);
                e.preventDefault();
            } else {
            alert('Login failed.');
            return false;
            }
       }, 'json');
    });
});
</script>

I have tried numerous things. As you can see I have 2 options to change the page in the code, one commented out. The one that is commented out, nothing happens. The active code changes the url to mobile.home.php but just slides up the login form again. Both mobile.login.php and mobile.home.php have page divs id's.

I can’t seem to figure this out, any ideas?

Answer 1

This should be your problem:

$.mobile.changePage('mobile.home.php', 'slide', false, true);
e.preventDefault();

Dont use e.preventDefault(); here, it will prevent a successful transition.

Here’s a simple example: http://jsfiddle.net/WWfEq/

Comment/Uncomment e.preventDefault(); to see a difference.