CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Leonardo Marques
Leonardo Marques

Reputation: 3951

Changing pages with jQuery Mobile

I'm using jQuery Mobile to make an academic work. I am using a anchor with an event onclick and no href attribute to change from one page to another. This works without a problem but after loading a page it displays Error Loading Page pop up.

This is an example of this behavior:

testes.js:


    function createAndChange(){
        var lol="<div data-role='page' id='pg2'><div data-role='header' data-backbtn='true'>XPTO</div><h1>LOL</h1></div>";
        $("body").append(lol);
        $("#pg2").bind("callback", function(e, args) {
            alert(args.mydata);
        });
        $.mobile.changePage($("#pg2"),"slide");
        $.mobile.updateHash('#pg2',true);
        $(page).trigger("callback", args);
    }

index.html:


<html>
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="testes.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">header</div>

            <div data-role="content">
                <a onclick="createAndChange()">content</a>
            </div>

            <div data-role="footer">footer</div>
        </div>
    </body>
</html>

Thank you for your attention.

Upvotes: 3

Views: 23539

Answers (1)

Terrance
Terrance

Reputation: 11872

Your call to $.mobile.changePage($("#pg2"),"slide"); isn't working properly.

Try explicitly declare all the parameters like this:

$.mobile.changePage( $("#pg2"), "slide", true, true);

I didn't check the bugs list but apparently its a bug. For more info on this check the forum.

As for the error, its is there because the page doesn't know what args is in this line.
$(page).trigger("callback", args);

But this is pretty much the code I came out of your problem with.... 


<html>
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <!--<script type="text/javascript" src="testes.js"></script>-->
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript">
        function createAndChange(){
            /*
            var lol="<div data-role='page' id='pg2'>"+
                    "   <div data-role='header' data-backbtn='true'>XPTO</div>"+
                    "   <h1>LOL</h1>"+
                    "</div>";
            $("body").append(lol);
            */

            $("#pg2").bind("callback", function(e, args) {
                alert(args.mydata);
            });

            //$.mobile.updateHash('#pg2',true);
            //$.mobile.changePage($("#pg2"),"slide");
            $.mobile.changePage( $("#pg2"), "slide", true, true);

            $("page").trigger("callback");
        }
        </script>
    </head>
    <body>
        <div data-role="page" id="frontpage">
            <div data-role="header">header</div>

            <div data-role="content">
                <a onclick="createAndChange()">content</a>
            </div>

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

        </div>

        <div data-role="page" id="pg2">
            <div data-role='header' data-backbtn='true'>XPTO</div>
            <div data-role="content">
                <h1>LOL</h1>
            </div>
            <div data-role="footer">footer</div>
        </div>

    </body>

</html>

Upvotes: 5

Related Questions