Create Your First Mobile App with PhoneGap Build – Adding Pages with jQuery Mobile

This is part 5 in an ongoing series. You can find part 1 herepart 2 herepart 3 here and part 4 here. The files for the sample app are available here.

We’ve made our app look and feel more like an app, but our list items, when clicked, simply open up the project web page. At this point, let’s create a new page to view the selected repository’s details. In your code editor, start by creating a new page called repo-detail.html. The HTML code below is the contents of our new page, which is mostly made up of containers that we will fill with the data for the chosen item via JavaScript.



<div id="reposDetail" data-role="page" data-add-back-btn="true">

    <div data-role="header">
        <h1>Repository Details</h1>

    <div data-role="content">
        <div id="repoDetails">
            <h3 id="repoName"></h3>
            <p id="description"></p>
            <p id="forks"></p>
        <div id="ownerDetails">
            <img id="avatar" align="left" style="padding-right: 5px;" />
            <h3 id="ownerName"></h3>



In index.js, we’ll now change the link for each list item to use the new page instead of the project’s GitHub repository. As you may notice, we are passing the necessary project data (the username and project name) as URL variables.

function loadRepos() {
    $.ajax("").done(function(data) {
        var i, repo;
        $.each(data.repositories, function (i, repo) {
            $("#allRepos").append("<li><a href='repo-detail.html?owner=" + repo.username + "&name=" + + "'>"
            + "<h4>" + + "</h4>"
            + "<p>" + repo.username + "</p></a></li>");

In order to parse the URL variables on the subsequent page, I am going to use a function called getURLVars(). I am not sure who the original author of this function is but it is frequently reproduced on various sites when searching for parsing URL variables with jQuery.

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
        hash = hashes[i].split('=');
        vars[hash[0]] = hash[1];
    return vars;

Next we are going to bind an action to jQuery Mobile’s pageshow event. This event will be triggered when our new page is added to the DOM. When this event is fired, we will make a call the GitHub API get repository method to request the full details for the selected project. This is accomplished by adding the following code to index.js.

$('#reposDetail').live('pageshow', function(event) {
    var owner = getUrlVars().owner;
    var name = getUrlVars().name;

function loadRepoDetail(owner,name) {
     $.ajax("" + owner + "/" + name).done(function(data) {

You may have noticed that when we load the repository details, I am simply logging the returned data to the browser console so that we can inspect it. Let’s run this in the browser and take look at the console at the data being returned so that we can decide what we will display for the user in our detail page.

Next let’s add in some of the details text. You can feel free to add styling and/or other detail items that are not in my example code below to make your app more useful. For example, you might want to add the created date and last updated date for each project.

function loadRepoDetail(owner,name) {
     $.ajax("" + owner + "/" + name).done(function(data) {
         var repo = data;

         $('#repoName').html("<a href='" + repo.homepage + "'>" + + "</a>");
         $('#forks').html("<strong>Forks:</strong> " + repo.forks + "<br><strong>Watchers:</strong> " + repo.watchers);

         $('#avatar').attr('src', repo.owner.avatar_url);
         $('#ownerName').html("<strong>Owner:</strong> <a href='" + repo.owner.url + "'>" + repo.owner.login + "</a>");

You can now test the app in the browser and, if you are happy with the results so far, zip it up and upload it to PhoneGap Build. Once hydration is complete, simply reopen the app on your device. Below is a screenshot of the detail page of our app running in my browser. Changing pages will use the default page transition of “fade,” though this setting is configurable.


In part 6 we’ll begin to integrate PhoneGap API’s by examining the storage API. You can read part 6 here.


Backbone Model Unit Testing with Jasmine

How to create an advanced HTML5 placeholder polyfill