Code’s towards the bottom if you can’t be buggered to read my ramblings.
The Challenge: Add new “pages” (page divs) during execution in a mobile app. This was part of a project using jQuery Mobile and PhoneGap, and the information that I wanted to display wouldn’t be available until the app ran and was subject to change. In this case, the app lists a number of companies, and each was supposed to have their own “page” within the app. Tap the company name, see the company info. Simple, right?
The Reason: The app I was working on had a basic layout that could be coded beforehand, but much of the data would be unknown until the app actually ran and pulled that data from a server. Since the various companies that the app listed could change at any time, this needed to be dynamic. While the approval time for apps on mobile devices is enough of a burden (up to three weeks or more), I had the additional hurdle that an update for every new company might degrade user confidence. Yes, updating your apps too frequently can erode confidence, because the users start wondering what, exactly, you’re screwing up so bad that you need to patch it every week or two.
The Failed Approach: On an initial build of the app, I used a simple method to accomplish this: update a single page. Yep. When the user clicked the button to see a particular company, the app would have to dig through it’s little database, pull out the company name, logo, and other information, then shove it into containers for each piece of info. Sounds great. Well, it worked, but it was slow. Local storage on a device can be quite slow, especially when it comes to images (the logo, in this case). The speed gets worse if you’re pulling the images from the web. It was slow enough that users would sometimes see the logo of another company before the app had a chance to update the container with the new image. Nasty.
The Goal: Make a “page” (a page div) for each company as soon as the data comes in. Modern browsers, including the browser implementation within a PhoneGap project, lives and dies by the DOM. If you’re not familiar with it, long story short is that it is the “living” version of web pages and web data that your browser actually interacts with. My goal, then, was to find a good, reliable way to make new pages inside the DOM, as the data came in.
The Solution: I tried a lot of things that did not work. This included trying to create new page divs and append them to the page’s body element. No dice. By the way, as the title says, this was for a jQuery Mobile project on PhoneGap. PhoneHap is not necessary for this to work, but jQuery Mobile and jQuery are. Here’s the one method that did work:
1) Create a (just one) static “template” page in your html document. It can be as simple or as in-depth as you want. It can be empty, or you can structure the whole thing the way the rest of the pages will look. In my case, I could create a header area for the company name, an area for the logo, a text box for additional information about the company, and another text box for the phone number. Whatever you like. The below example is a simple one, but it doesn’t have to be. Important: assign the template div an id so it will be easily referenced later in code.
<!–// BASIC COMPANY VIEW PAGE //–>
<div data-role=”page” id=”page_basic_company”>
<div data-role=”header”> <h1></h1> </div>
<div data-role=”content”> </div>
<!–// END BASIC COMPANY VIEW PAGE//–>
2) Clone the template div, change its id and data-url values to the same thing, and then attach it to the body. Yes, all in one step. For editing simplicity, I’ve also assigned the new div to a jQuery variable. By the way, the [a] below is because I was iterating through an array of companies (called company_list). The array came in as JSON via AJAX, and here we go.
var $new_company_page = $(‘#page_basic_company’).clone().attr(‘data-url’, company_list[a].business_id).attr(‘id’, company_list[a].business_id).appendTo(‘body’);
3) Use the jQuery variable to reference the new page div and go to town. Add content. This can be anything from completely replacing the contents with new html to picking specific children elements to modify.
Hope this helps. If anyone figures out a better way, please do let me know. Enjoy.