Geek asks and answers

Change pages using jQuery Mobile

I am using jQuery Mobile for academic work. I use binding with onclick event and href attribute to go from one page to another. This works without problems, but after loading the page, the message "Error loading page."

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.

+3
source share
1 answer

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

:

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

, , -, . .

, , , args .
$(page).trigger("callback", args);

, ....


<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>
+5

More articles:


All Articles