CODEWITHSUNDEEP
jquery-mobilejqueryopenlayers
mrpopo
mrpopo

Reputation: 1563

JQuery Mobile: Trouble with page initialization events

I'm having a few issues initializing events on my JQuery Mobile site and I just want to see if I'm going about it the right way. Here is what my code kinda looks like:

<!DOCTYPE html>
<html>
    <head>
        <title>My page</title>

        <link rel="stylesheet" href="jquery.mobile-1.3.0-beta.1.css" />
        <script src="jquery-1.9.0.js"></script>
        <script src="jquery.mobile-1.3.0-beta.1.js"></script>
        <script text/javascript>
            function myFunction()
            {
                //do some code
            }
        </script>
        </head>
        <body>
            <div data-role="page" id="home">
                <div data-role="header">
                    <h1>Home</h1>
                </div>

                <div data-role="content" data-theme="f">
                    <p><a href="#next-page" data-role="button" data-transition="fade">2nd page</a></p>        
                </div>
            </div>
            <div data-role="page" id="next-page">
                <div data-role="header">
                    <h1>2nd page</h1>
                </div>
                <div data-role="content" data-theme="f">
                    <script text/javascript>
                        $("#next-page").on("pageinit", function() {
                            myFunction();
                        });
                    </script>
                </div>
            </div>
        </body>
</html>

For some reason, when I load the 2nd page, I just get the AJAX loading icon and it does not stop loading.

The other thing is, I don't want myFunction() to be called until the 2nd page is loaded which is why I have the script inside the 2nd page.

Any help is much appreciated :)

Upvotes: 0

Views: 155

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Javascript is key sensitive, if you are calling function myfuncion() then same function must exist.

In your case your function has a large F in its name: myFunction(), because called function myfuncion() don't exist browser will report an error and jQuery Mobile will stop the execution.

On the other hand this code:

$("#next-page").on("pageinit", function() {

});

is ok if you want to execute this function during the second page initialization. Jzst a little advice, change it to this:

$(document).on("pageinit", "#next-page",function() {

});

EDIT :

To solve your problem replace your pageinit event with pageshow event. jQuery Mobile has a problem with dealing with other "graphic" frameworks (maps, carousels) they will usually work only in pageshow event.

$(document).on("pageshow", "#next-page",function() {

});

Upvotes: 1

Related Questions