3

I am creating an apache cordova application using jquery mobile. I have a login page where on successful login the page is redirected to mainpage.html by using $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html"); On the mainpage.html I have a multipage template using a navabar. The code is below:-

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active" data-icon="home" rel="external" data-ajax="false">Home</a>
        </li>
        <li><a href="#pagetwo" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a>
        </li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p>
    <p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home" rel="external" data-ajax="false">Home</a>
        </li>
        <li><a href="#" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a>
        </li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>No buttons are pre-selected (highlighted) in this page..</p>
    <p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div>

The problem is that when I click the Page Two tab it does not load at the first time. On clicking it once more, it loads the div with the id page two

Can you please help me to correct the issue of not loading the page two at the first click?

Ridrog
  • 217
  • 2
  • 4
  • 10
user369544
  • 31
  • 3
  • Pls edit your post to make it clear, that the problem is only occurring when the page is loaded with `$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html");` and add the relevant code from the previous page. – Ridrog Jan 31 '16 at 17:43

1 Answers1

0

The lazy solution:
Change the Page with pure javascript. 

location.href = "mainpage.html";

The complicated / dirty solution

I was able to reproduce your problem.

The Problem is, how jquery-mobile handles the ajax navigation. If you link from page1.html to page2.html. Jquery-mobile will look into page2.html and take only the first div with the data-role="page" and load it into page1.html

If you link to a multipage, you will always get the first page and nothing more. To change this, you have to add rel="external" to the link. This way the framework load the entire page, header and all pages included.

With this knowledge, the only thing we should change on the $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html") to say jqm that he should reload the page.
The Api doc says that there is a option reload or reloadPage (deprecated). But unfortunately this change nothing. I don't know if it doesnt work or if i don't understand the option right.

$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html",  {reloadPage : true});

if you append the option dataUrl : "mainpage.html" the pagetwo is still not loading into the DOM, but the anchor to pagetwo is working.
But you will notice a mess in the browsers url-bar (start.html#mainpage.html)

 $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html",  {reloadPage : true, dataUrl : "mainpage.html"});

Now you can apend another option changeHash: false to not change the hash/url when you load the new page. 

 $( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html",  {reloadPage : true, dataUrl : "mainpage.html", changeHash: false});

This way you don't get a mess in the browsers url-bar. But you can't navigate back with the browsers back button. And a reload with will bring you to the previous page.

Ridrog
  • 217
  • 2
  • 4
  • 10