Geek asks and answers

$ .mobile.changePage does not work properly in multipage

Hello everyone. I am switching from index.html to test.html as $.mobile.changePage("test.html", {transition : "slide"});which works fine. But in my test.html there are several html pages in different divs. In test.html, I call another html page which is in another div in the same html file (ietest.html) as $.mobile.changePage("#secondtestPage", {transition : "slide"});But here it is not a transition to secondtestPage. My index.html looks like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile: Demos and Documentation</title>

    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
    <!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
    <!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
    <div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >

            <div data-role="button">
                <input type="submit" data-role="button" value="firstPage" id="firstPage">
            </div>



    </div>  


    <script type="text/javascript">
                function callSecondPage()
                {
                    alert ("Ins ide callPage");

                    //$.mobile.changePage('#secondPage');
                    $.mobile.changePage("test.html", {transition : "slide"});


                }
            </script>

</body>
</html>

Now go to the test.html page and my test.html file looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile: Demos and Documentation</title>

        <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
        <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
        <link rel="stylesheet" href="docsdemos-style-override.css" />
        <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
        <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
        <!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
        <!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


    </head> 
    <body> 
        <div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >

                <div data-role="button">
                    <input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
                </div>

                <script type="text/javascript">
                    function callnewSecondPage()
                    {
                        alert ("Inside callPage");

                        //$.mobile.changePage('#secondPage');
                        $.mobile.changePage("#secondtestPage", {transition : "slide"});
                        //$.mobile.changePage("index.html", {transition : "slide"});


                    }
                </script>

        </div>

        <div data-role="page" id="secondtestPage"  onclick=callThirdPage() class="type-home" data-ajax="false" >

                <div data-role="button">
                    <input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
                </div>

                <script type="text/javascript">
                    function callThirdPage()
                    {
                        alert ("Inside callPage");

                        $.mobile.changePage('#thirdtestPage');

                    }
                </script>

        </div>

        <div data-role="page" id="thirdtestPage"  onclick=callFourthPage() class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
                </div>

                <script type="text/javascript">
                    function callFourthPage()
                    {
                        alert ("Inside callPage");

                        $.mobile.changePage('#fourthtestPage');

                    }
                </script>

        </div>

        <div data-role="page" id="fourthtestPage" class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
                </div>

        </div>

        <div data-role="page" id="fifthtestPage" class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
                </div>

        </div>

        <div data-role="page" id="sixthtestPage" class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
                </div>

        </div>
    </body>
</html>

But now when the button is pressed, it does not go to "callSecondPage". and if I call $.mobile.changePage("index.html", {transition : "slide"});, then it correctly refers to index.html, then why does multipPage changePage not work? one more thing. If you replace the index.html code with test.html, it $.mobile.changePage("#secondtestPage", {transition : "slide"});works fine.

, ? . .

+5
2

jQuery Mobile test.html, . callSecondPage(), index.html, test.html, , , . - test.html .

:

, , jQuery Mobile -role = "page" , . DOM index.html test.html, , , .

jQuery Mobile: http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html

, , Ajax , rel= "external" data-ajax = "false" . , , Ajax URL. , Ajax (#) Ajax, , .

+6

false , :

$.mobile.changePage("#secondtestPage", {transition : "slide"}, false);
0

More articles:


All Articles