jQuery Mobile "Getting Started" Application

A couple of weeks ago, I shared an Employee Directory sample application built with jQuery Mobile and PhoneGap. That application was implemented “Ajax-style”, keeping the UI and the data access code cleanly separated. In other words: no server code intermingled in the HTML markup.

A number of people have asked for a similar example using a “classic” (non-Ajax) implementation where pages (markup + data) are entirely built at the server-side before being delivered to the client.

So, here is simpler version of the same application built “sans Ajax”. I used PHP in this version, but you can of course use your favorite server-side technology (Java, .NET, CF, RoR, etc).

Run the application

Click here to run the application.

Download the source code

Click here to download the source code. Edit config.php to make sure it matches your database configuration.

Running the Application with PhoneGap

With this implementation, the application files can’t be installed locally on the device since pages are created dynamically on the server side. So, in the PhoneGap application, instead of loading a local HTML file, you point to a file hosted on your web server. Here is the code for my main Android activity. Greg has a great post on this topic (I haven’t tried it on iOS myself yet).

package org.coenraets.directory;

import com.phonegap.DroidGap;

import android.os.Bundle;

public class EmployeeDirectoryJQMPHPActivity extends DroidGap {
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.setBooleanProperty("loadInWebView", true);



To recap the difference between the two versions: In the original (Ajax) version, the server side code exposes a set of services consumed by an HTML/JS client. In this new (non-Ajax) version, the server-side code returns fully assembled HTML pages (markup + data).

The original (Ajax) version has many benefits:

  1. Your UI code doesn’t have a dependency on a specific server-side technology.
  2. Your data access logic doesn’t have a dependency on a specific UI technology.
  3. You can manipulate the data on the client side (i.e. sort using different criteria) without requiring a server roundtrip.
  4. That decoupled architecture also works offline when working with a local database.

When none of the items above is a requirement of your application, the “non-Ajax” approach may work too and may even have some benefits. In particular, it makes the jQuery Mobile page navigation model easier to handle.

  • Yes Phonegap is amazing, it completely cuts down development time tremendously. In addition jquery mobile UI looks great. Its interesting to see your choice of app. I’m developing an app that looks just like the one that you built! Great stuff, keep up the amazing work.

  • Excelente, Gracias, Gracias, Gracias

  • I’m creating an ios app for our church. In a couple pages of the app I will need to pull content from our website (Made with expression engine) into the app. Would this be the best method of doing so or should I go a different route? I’ve read about doing it with JSON but that seems like you need special API hooks that the website has (like twitter). Any help you can provide would be greatly appreciated. Thanks!

  • Pingback: Aplicación de ejemplo usando jQuery Mobile y PhoneGap « desarrollophpsenior()

  • Peter

    Nice article, it was so helpful for me. But what if my server is not available for any reason? (no internet connection, server crash, etc.) Do you know any solution to handle HTTP error codes and show a customized 404 page? (instead of the default one)

  • i want to know that if i am required the data from the server form the the url like xyz.php then how can we get and display the data into it through json. plz provide me information

    • kishore

      even i’ve the same question as yours…pls reply if you found the answer elsewhere…

  • Thanks for the article, Still not sure whether to use ajax navigation or not though

  • Bill Soriano

    An excellent tutorial, great effort of your part to share your knowledge, thank you very much for that.
    I have a question about the example, this basically query information and you recomend separate server(php)+www(html,js,css,etc)… but if I want to insert or update information, how I can do this at time of do submit for pass the data?

  • Novia

    How can i run the application? is is possible importing to a local server like xampp

  • dab

    Thanks for the article. It this like creating a “mobile version” ie browser version using jquery mobile and PHP inline, but make it downloadable as a native app?

  • Jayanth

    thanks for the post…but i have a question…is it possible to run php inside phonegap…???i dont think it is possible….correct me if am wrong….

  • How can i run the application?

  • Mark

    How would you do this but still have the app accessible offline

  • Pingback: Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Programación de Dispositivos Móviles()

  • Despite what many might think, world of tanks gold hack is well
    known across hundreds of nations all over the world. world of tanks gold
    hack has been around for several centuries and has a very important
    meaning in the lives of many. It would be safe to assume that world of tanks gold hack is going to be around for
    a long time and have an enormous impact on the lives of many people.test
    for introduce3

    Social & Cultural Factors

    world of tanks gold hack has a large role in American Culture.
    Many people can often be seen taking part in activities associated
    with world of tanks gold hack. This is partly because
    people of most ages can be involved and families are brought together by
    this. Generally a person who displays their dislike for world of tanks gold hack may be considered an outcast.

    Economic Factors

    It is not common practice to associate economics with
    world of tanks gold hack. Generally, world of tanks gold hack would be thought to have no effect on our economic situation, but there are in fact some effects.
    The sales industry associated with world of tanks gold hack
    is actually a 2.3 billion dollar a year industry and growing each year.
    The industry employs nearly 150,000 people in the
    United States alone. It would be safe to
    say that world of tanks gold hack play an important role in American economics and
    shouldn’t be taken for granted.

    Environmental Factors

    After a three month long research project, I’ve been able to
    conclude that world of tanks gold hack doesn’t negatively effect the environment at all.

    A world of tanks gold hack did not seem to result in waste products
    and couldn’t be found in forests, jungles, rivers, lakes, oceans, etc…
    In fact, world of tanks gold hack produced some positive
    effects on our sweet little nature.

    Political Factors

    Oh does world of tanks gold hack ever influence politics.
    Last year 5 candidates running for some sort of position used world of tanks gold hack as the primary topic of their campaign. A person might
    think world of tanks gold hack would be a bad
    topic to lead a campaign with, but in fact with the social and environmental impact is has, this topic was able to gain a
    great number of followers. These 5 candidates went 4 for 5 on winning their


    world of tanks gold hack seem to be a much more important idea that most give credit for.
    Next time you see or think of world of tanks gold hack, think about
    what you just read and realize what is really going on. It is likely you under valued world of tanks gold hack before,
    but will now start to give the credited needed and deserved.

  • Pingback: Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Centro Inca()

  • sfsxxsf

    Eczema is generally a body’s reaction to what it perceives as a threat. Studies have shown that a main cause for eczema can be different food allergies, so once you’ve identified the type of eczema you have, it then becomes very important to figure out which foods cause eczema. cheats nba 2k15

  • Pingback: Create Your First Mobile App with PhoneGap Build – Using the Notification API - Modern Web()

  • but make it downloadable as

  • Deniz

    Hi. But phonegap not building .php file. it create new index.html file. depend on this example not start.
    What is solve for this problem?


  • Please someone help me on how to fix this and

  • herşey kaliteli üretim.

  • качество, массового производства и справедливые цены

  • Formalarımızda kullandığımız kumaş; birinci sınıf mikro-interlok olup; esnek-fit, anti-bakteriyel, termo-balans ve hemen kuruma özelliğine sahiptir. Futbol maçlarınızda size hareket özgürlüğü sunan bu formalar; günlük olarak giyilebilecek kadar şık tasarlanmıştır. Forma Modellerimiz özel dikim ve Dijital baskılı olarak iki tür üretilmektedir.

  • Multi-lab offer BNP 2 Machinable Aluminium Nitride in blocks, rods, sheets and finished components for industries including aerospace.

  • ücretsiz backlink ekleme sitesi giriş yapın üye olun bekleriz

  • SEO Training Institute

    Search engine optimization institutes are present in every region of the world to provide guidance for fresh people in web developing industry.

  • very nice and thanks for sharing

  • Its great job you have done and one doubt by using Ajax version which applications can built like which industry or in which platforms can built the applications