jQuery Mobile Error - Cannot call method 'trigger' of undefined

Question

I'm getting the following error message in jQuery Mobile:

Cannot call method 'trigger' of undefined

Its line 2836 in jQuery.mobile.js, which is as follows:

mpc.trigger( "beforechangepage" );

My code looks like this:

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.mobile.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

    <title></title>
</head>

<body>
<!-- Application -->
<div data-role="page" id="application" data-theme="f" >

    <div data-role="header">
        <h1>header</h1>                     
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
        <li><a href="#" data-icon="arrow-r">test1</a></li>
        <li><a href="#" data-icon="arrow-r">test2</a></li>
            <li><a href="#" data-icon="arrow-r">test3</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h1>footer</h1>
    </div>

</div><!-- /page -->


<!-- Login -->
<div data-role="page" id="login" data-theme="f">

    <div data-role="header">
        <h1>header</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
        <li><a href="#" data-icon="arrow-r">test1</a></li>
        <li><a href="#" data-icon="arrow-r">test2</a></li>
            <li><a href="#" data-icon="arrow-r">test3</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h1>footer</h1>
    </div><!-- /content -->

</div><!-- /page -->

In app.js, I have the following code:

$(document).ready(
    function () {
        $.mobile.changePage( $('#login') );
})

All I get is a blank white screen and and the error I mentioned above.

Any help appreciated.

Regards,

Related: http://stackoverflow.com/questions/6862939/whats-the-right-way-to-do-document-ready-in-jquery-mobile — Phill Pafford, Jul 29 '11 at 14:56
Login Example: http://codeasp.net/blogs/teisenhauer/microsoft-net/1049/jquery-mobile-login-dialog-box — Phill Pafford, Jul 29 '11 at 15:06

score 3 · Accepted Answer · answered Aug 15 '11 at 15:08

I was in a similar situation while testing my mobile site in Safari on OS X. To resolve, I had to bind to the pagecreate event instead of relying solely on $(document).ready(). Everything else on the site was working without a bind to pagecreate until I tried using $.mobile.changePage().

$().ready(function() {      
    console.log("Document is ready.");
    $('#home').live('pagecreate', function(event) {
        DoStuff();
    });
});

DoStuff() {
    if(!CheckCredentials())
        $.mobile.changePage('#login');
    else {
        // Rest of code...
    }
}

They make this clear in their documentation, which I initially missed.

jQuery Mobile Error - Cannot call method 'trigger' of undefined

1 Answers1