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,

Login Example: codeasp.net/blogs/teisenhauer/microsoft-net/1049/… — Phill Pafford
– Phill Pafford, Commented Jul 29, 2011 at 15:06

Jon · Accepted Answer · 2011-08-15 15:08:31Z

3

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.

answered Aug 15, 2011 at 15:08

Jon

4,9453 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related