1

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
white_tiger
  • 15
  • 5
  • Why are you using `changePage` here? just add the link to `href`. e.g. `href="BranchLocations.html"`. Use `changePage` when you want to change pages programmatically. – Omar Jul 31 '14 at 13:18
  • @Omar, that is not going to work in the case of Worklight. By navigating away from index.html completely, you lose the Worklight framework (js files loaded and required). If you load another page, they're gone (and mustn't be initialized over and over). – Idan Adar Jul 31 '14 at 13:21
  • @white_tiger, I suggest for you to search stack overflow for worklight+multipage, as this has been asked multiple times and you Will find explanations and code samples – Idan Adar Jul 31 '14 at 13:22
  • @IdanAdar the page will be load via Ajax, so the structure of index page is preserved. I dont know how WL deals with Ajax. And btw, it's called _Single Page Model_ not _Multi-Page_. – Omar Jul 31 '14 at 13:24
  • Thanks Omar, I am well aware that Worklight apps are based on SPM approach... – Idan Adar Jul 31 '14 at 13:26
  • @IdanAdar - Thanks for the reply. I asked this question because most of the examples and the links you mentioned use changepage instead of pagecontainer. I will look at the reply below and will let you know. – white_tiger Aug 01 '14 at 09:24
  • @IdanAdar I have edited the question to show that the problem was solved. The main issue I had was that each of the linked pages had a script file in it that caused the original page to reload. I still don't understand why though. – white_tiger Aug 01 '14 at 11:14
  • Dunno; depends on the script, what it is, what it does and when does it get loaded. Glad you got it resolved. – Idan Adar Aug 01 '14 at 12:18
  • If you found the answer to your question and it wasn't the one proposed by Idan, please post an answer to your own question instead of editing it into your original post. – eddie_cat Sep 22 '14 at 18:16
  • please post an answer to your question as an answer and don't edit it your question. – Kami Kaze Apr 25 '18 at 13:58

1 Answers1

-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.

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.

Community
  • 1
  • 1
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • 1- you should update your answer(s) as `$.mobile.changePage()` is deprecated. 2- instead of posting an answer with links, you should close it as duplicate. – Omar Jul 31 '14 at 14:13
  • 2
    My experience with duplicates is that moderation tends to never reach those, so in order for the person to get a full appreciation of the subject matter, it is better to reply even if duplicate. Change how SO works, I'll gladly mark as duplicate. My first priority is for the IBM customer. – Idan Adar Jul 31 '14 at 14:16
  • Also, not everyone use the latest jQuery Mobile version for various reasons. In this case another demo project can be produced using the latest jQM, but the concept remains the same (re Worklight). If the user will provide a demo project as requested, I'll gladly do so. – Idan Adar Jul 31 '14 at 14:16
  • 1- Based on code given in OP, jQM 1.4 is used. 2- AFAIK, SO isn't a _customer care center_. – Omar Jul 31 '14 at 14:21
  • 1
    Omar, if you think you can produce a better answer - download Worklght for Eclipse, it's free. Install it and create an application using jQuery Mobile that will solve the OP's question. Otherwise, what do you want from me? You don't like the answer? -1 it. Goodbye. – Idan Adar Jul 31 '14 at 14:28
  • Pls read my comments thoroghly. I didn't claim you answer is wrong nor there are better solution. I have mentioned two points 1- your answers are outdated and should be updated to fit jQM 1.4 new functions 2- you have posted several links that answer the same question. – Omar Jul 31 '14 at 16:53
  • 3
    Deprecated does not mean removed. I will not update my previous answers. Going over every single answer given at some point in time is useless and pointless. Every user can add an answer, get clues from existing answers, etc. Not everything is meant to be always up-to-date. This discussion is moot and out of place. – Idan Adar Jul 31 '14 at 16:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58472/discussion-between-idan-adar-and-omar). – Idan Adar Aug 01 '14 at 08:33