1

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?

Maria Borbonés
  • 153
  • 1
  • 1
  • 12
  • I don't know about `worklight` but in jQM is usual to use anchors to move between pages. You can have the pages on the same document or get the loaded by ajax, so on page change there is reload. This is the expected behaviour. – ojovirtual Mar 04 '14 at 12:13

1 Answers1

3

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:

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.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89