Issue with multi-page navigation using jQuery Mobi

Question

This question already has an answer here:

How to change between pages using Jquery Mobile in Worklight (1 answer)

Closed 5 years ago.

I am developing a sample mobile banking app in IBM Worklight V6.2 using the jQuery Mobile Framework. I read the Getting Started Documentation on IBM Worklight and it mentions a way to implement multi-page navigation using fragments. However, it also states that if you are using a JavaScript UI Framework, use its API's instead.

I read up on the jQuery Mobile pagecontainer method and am implementing it as below:

<li><a href="#" onclick="$(':mobile-pagecontainer').pagecontainer( 'change', 'BranchLocations.html' )" id="item1">Branch Locations</a></li>

However, I get the issue that the linked page loads after clicking the link but the original page then reloads. Could someone explain to me why this is happening? Is this a known issue?

---

I found the problem. I had a link to the

<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>

In the linked pages. That is the reason it was reinitializing the original index page.

Answer 1

See this project for a Worklight 6.2-based app using jQuery Mobile 1.4.3's Pagecontainer widget.
In the app, you click on a button to transition from index.html to page1.html by using:

HTML

<a href="#" data-role="button" id="button-mainpage" onclick="changeToPage1();">load page1</a>

JavaScript

function changeToPage1() {
    $(':mobile-pagecontainer').pagecontainer('change','page1.html');
}

---

You may also take a look at the following questions that are answered with explanation and project examples for using changePage.

Note that the projects may be from Worklight 6.0 and 6.1 rather than 6.2 but that does not matter as here it's about the JavaScript, simply review it.

• How to change between pages using Jquery Mobile in Worklight
• IBM Workligt Single HTML file containing all application pages: How to load new page?
• IBM Worklight 6.1 - Why is Cordova code not working when placed in a sub-page?
• IBM Worklight - Page fragmentation
• IBM Worklight - Navigation errors in a multipage app

In all of them, the idea is that Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.

Instead, you can use jQuery's load or jQuery Mobile's changePage (deprecated in v1.4, to be removed in v5), to load different "pages". Ample examples are provided above.