ibm mobilefirst - How to change between pages using Jquery Mobile in Worklight

Question

Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:

<ul data-role="listview" id="listview" data-inset="true">
        <li data-role="list-divider" id="divider">Divider</li>
        <li id="listitem"><a href="#">Item</a></li>
        <li id="listitem0"><a href="#">Item</a></li>
        <li id="listitem1"><a href="#">Item</a></li>
    </ul>

But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?

Answer 1

As you rightly so mention, 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.

In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.

jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/

.load()
http://api.jquery.com/load/

Here are a couple of Worklight 6.1 projects demonstrating page navigation:

• JQM_multipage_load_changePage.zip - uses either .load or .changePage
• JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow

In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.

---

Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.