CODEWITHSUNDEEP
jquerymobilejquery-mobilecordova
quickappit
quickappit

Reputation: 11

$.mobile.changePage doesn't work on Phonegap?

I have a problem with the method $.mobile.changePage, in fact this method, when i converted the app with phonegap, doesn't work.

This is the code of my page .html. Is there a solution?

Page index.html

<!DOCTYPE html>
<html>
<head>
    <title>Prova </title>

    <link rel="stylesheet" href="css/jquery.mobile-1.0b1.css" />
    <script src="js/jquery-1.6.1.min.js"></script>
    <script src="js/jquery.mobile-1.0b1.js"></script>

    <script>
    $(document).ready(function() {

        $('#linkpersonale').click(function() {
            $.mobile.changePage("#personale", null, true, true);
        });

    });
    </script>


</head>
<body>

<div data-role="page" id="home">

<header data-role="header">
    <h1>Prova Page1</h1>
</header>

<div data-role="content" id="content">


    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" data-counttheme="d">
        <li>
            <a class="ui-link-inherit" id="linkpersonale">
                <h3 class="ui-li-heading">Personale</h3>
                <p class="ui-li-desc">...</p>
            </a>
        </li>
    </ul>

</div>


<footer data-role="footer" data-role="footer" data-id="footer-nav" data-position="fixed">
    <div data-role="navbar" id="navbar_home">
        <ul>
            <li><a href="#home" data-icon="home" data-iconpos="top" data-theme="a">Home</a></li>
        </ul>
    </div>
</footer>

</div>

</body>
</html>

Page personale.html

<!DOCTYPE html>
<html>
<head>
    <title>Prova </title>

</head>
<body>


<div data-role="page" id="personale">

<header data-role="header">
    <h1>Prova Pag2</h1>
</header>


<div data-role="content">

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" data-counttheme="d">
    <li>
        <a class="ui-link-inherit" href="#">
            <h3 class="ui-li-heading">Etc etc</h3>
            <p class="ui-li-desc">...</p>
        </a>
    </li>

</ul>

</div>

<footer data-role="footer" data-role="footer" data-id="footer-nav" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home" data-icon="home" data-iconpos="top" data-theme="a" data-transition="slide">Home</a></li>
        </ul>
    </div>
</footer>

</div>

</body>
</html>

Some advice? PS: sorry for my english, i'm italian ;)

Upvotes: 1

Views: 6340

Answers (4)

michel.iamit
michel.iamit

Reputation: 5916

As said in other answer you can either change page to the 'pagename.html' or it's ID.

You are using it's ID 'personale'

In that case you should use the JQ sign to indicate you are using a variable (= $):

$("#personale")

so try 

$.mobile.changePage($("#personale"), null, true, true);

And one more thing, you know in mobile html pages you can put more page elements in 1 file, right?

That saves some loading time when switching pages.

Upvotes: 1

Soatl
Soatl

Reputation: 10592

I think this is the issue:

$.mobile.changePage("#personale", null, true, true);

Because personale.html is a different file I think that you need to add a .html. Instead try 

$.mobile.changePage("personale.html", null, true, true);

If you wanted to use the previous code, then you just need to add the personale.html code to your pageindex.html page. The correct page will show up anyways, then you can just switch through IDS like you have.

PageIndex.html:

<div data-role="page" id="home">
<!-- CODE -->
</div>
<div data-role="page" id="personale">
<!-- CODE -->
</div>

NOTE: This WILL cause errors with blackberries and HTC phones, as well as many other phones. They will see both pages at once. On the other hand any mobile.changePage() call will not work with them anyways

Upvotes: 1

Ben
Ben

Reputation: 7597

PhoneGap is a red herring here. You should test this as plain old jQM code and you will see it doesn't work there either. This is because you're referencing a div in an HTML file that doesn't contain it (index.html).

I would try calling changePage() on personale.html rather than #personale instead.

From the docs on $.mobile.changePage():

The to argument can accept either a string (such as a file url or local element's ID)...

Upvotes: 4

Phill Pafford
Phill Pafford

Reputation: 85378

try 

$.mobile.changePage("personale.html", null, true, true);

Upvotes: 1

Related Questions