These past few months I’ve been busy learning Cordova (a.k.a. PhoneGap) and jQuery Mobile (JQM) for a top-secret project we’re working on :P. One of the challenges I came across using these technologies is transitioning from one page container to another when the client has already all the data it needs at hand. Let’s take an example.
We have an Android client app which in one HTTP call gets the list of company employees plus their details such as salary, home address, and email address. I didn’t want to overload the user with information so I decided to display only the list of employees.
What I wanted to do is that when the user clicks on an employee, the page transitions to that employee’s details. My first stab at the problem was putting each employee’s details inside a separate page container. Here’s the code:
In the above snippet, the first page contains the list of employees while the second page has Regina’s details. Unfortunately, clicking on the anchor “regina” didn’t cause the page to transition to the employee details page of Regina. Reading the JQM 1.1 docs I found out that only the first page of a multipage document is inserted into the DOM when linking from another document. The docs go on to say that to load all the document’s pages into the DOM you need to set the data-ajax attribute to false inside the link which opens the multipage document. So that’s what I did:
This did the trick. Clicking on the anchor “regina” triggered the page to transition to the employee details page. But setting the data-ajax to false broke the native application view since the page was opened in the browser.
After googling the issue I found out the fix to be an easy one. Just add the domain to Cordova’s white-list. In Android, the white-list is located in “cordova.xml” under res/xml. I simply inserted the multipage document’s domain in the XML file:
With this step, the pages were displayed as part of the native application view as shown below: