1

my code is like this :

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

    <div data-role="header">

    </div>

    <div data-role="main" class="ui-content">
    <input type="button" value="התחבר" onclick="checkDetails()" />
    </div>

    <div data-role="footer">

    </div>
</div>

now, by the function checkDetail() i need to move to anthor page(below)

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

    <div data-role="header">
        <h3>asd</h3>
    </div>

    <div data-role="content" class="ui-content">

    </div>

    <div data-role="footer">
        <ul>
            <li><a>a</a></li>
            <li><a>as</a></li>
            <li><a>asd</a></li>
        </ul>
    </div>
</div>

the problem is when i move to it, i reach to HomePage but it shown as a normal html page not a jquery mobile. By the way, LoginPage shown as jQueryMobile, but HomePage isn't.

That's how i move,

$('#LoginPage').hide(function () {
    $('#HomePage').show();
});
Elliot B.
  • 17,060
  • 10
  • 80
  • 101
Karam Haj
  • 1,080
  • 2
  • 9
  • 20

1 Answers1

1

You should not use the $.show() and $.hide() methods from the core jQuery library for page navigation. Page navigation in jQuery Mobile is handled through the Pagecontainer Widget -- specifically using change method.

In your example, you would do the following:

var homePage = $("#HomePage");
$.mobile.pageContainer.pagecontainer("change",homePage,{});
Elliot B.
  • 17,060
  • 10
  • 80
  • 101
  • I saw in a number of videos, and works simply, not as you said, by the way i opened the page but not a design of mobile – Karam Haj Apr 06 '17 at 11:41
  • I'm having trouble understanding. If you are saying that you saw a video which told you to use `.show()` and `.hide()` to open jQuery Mobile pages, then that video is wrong. You need to use the Pagecontainer widget. Please see the duplicate question linked by Omar for the same answer. – Elliot B. Apr 06 '17 at 17:11