pagecontainer change function not working

Question

I can get the pagecontainer change function to work inside a function that is called with a button click. But for some reason the pagecontainer change function isn't working when I run the code outside of a function. I do a check to see if a user is logged in and then want to do a page change/redirect if they aren't logged in.

 <script>
//works
    function test() {
        $(':mobile-pagecontainer').pagecontainer('change', '#event-list-page');
    }
//doesn't work
    var user = window.localStorage.getItem("user");
    if (user == null){
        alert('not logged in. Should redirect.');
        $(':mobile-pagecontainer').pagecontainer('change', '#event-list-page');
    }
 </script>

What is the best solution for this problem? Should I just do a javascript redirect? Or do I need to wait for the page to load all the way or something?

Answer 1

You should intiate the $.mobile.pageconatiner first, example:

$.mobile.pageContainer.pagecontainer({ defaults: true });

Answer 2

I think that the jQuery mobile has to have the entire page loaded first because it does a bunch of funny things pre-loading pages and doing ajax transitions and things. It's not a simple redirect like setting window.location. If you pt it in a document.ready block it will work.

$( document ).ready(function() {
                    $.mobile.pageContainer.pagecontainer('change', '#event-list-page');
                    });