Sample App: Mobile jQuery without jQuery Mobile

Let me preface this post by saying that I’m not advocating this approach versus the other. These are just experiments.

In my previous post, I shared a sample Employee Directory application built with jQuery Mobile. In this post, you’ll find another version of the same application: this version uses jQuery core, but not jQuery Mobile.

One of the nice things about jQuery Mobile is that it has built-in support for native-like animated view transitions. To achieve this, jQuery Mobile loads the different pages of your app inside a single document so that it can animate them in and out of the viewport. These animations are nice, however, depending on your application, loading pages into a single document may sometimes make you feel like you are fighting the system. For example, history management, deep linking, same page transitions, and name spaces (unique ids) may be harder to handle.

This version of the application loads pages “the traditional way”. The downside is obviously that you don’t get the animated transitions, but it makes other things easier to manage. Trade offs.

Another key feature of jQuery Mobile is its “progressive enhancement” approach. You annotate HTML elements to indicate their role (page, header, listview, footer, etc). jQuery Mobile then uses these annotations to inject styles and behaviors. With just a few annotations, you have an application that looks and behaves like a native mobile app. Without JQuery Mobile, making the application look good required a lot more CSS work, but in the end you are also in control of every pixel on the screen.

Again, these are just experiments. I’m interested to hear what you think. What has been your experience? How do you handle page loading and transitions?

Run the Application

Click here to run the application.

Download the Source Code

You can download the source code (HTML, JavaScript, CSS, PHP services and SQL script) here.

PhoneGap

You can use PhoneGap to package this application for different platforms. This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc). In my next blog post, I’ll show the same application getting the data from a local database (using the PhoneGap database API) as opposed to PHP services.

Update

I posted a version of the same application getting data from a local database using the PhoneGap database apihere.

  • Nice app. I totally agree with your reasons for using standard jquery. I don’t like the depending so much on the framework for how your app will look and feel. I have tried jquery mobile but found undoing some of the built in look and functionality was more difficult than building it from scratch.

  • You don’t have to use the single document approach if you don’t want to – just use data-ajax=”false” or rel=”external” on your links and they’ll get loaded like a regular page. I started off this way back with some of the earlier alphas when I seemed to have issues with the single page version. Since they got pushState going, things seem much better.
    There is an “official” themeroller in the works for some UI variation but I know it can be a pain to modify manually. If you’re a design duffer like me, it’s a good starting point! I think the download builder (when it arrives) will be a big plus so you can pick and choose the bits of the framework you want.

  • Pingback: Sample Application using jQuery Mobile and PhoneGap()

  • Pingback: Elegant D » Sample App: Mobile jQuery without jQuery Mobile()

  • R.D. Miller

    Thanks for posting this great example! When I run the app on the IPhone, the “Home” button overlaps “Employee Directory” on the employee detail screen. Is there any way to make only the IPhone scale down the screen without it also happening on the Android?

  • Actually, jQueryMobile is seriously flawed as jQueryUI. Sad because jQuery is really the defacto standard and one of the best js lib to date.

    I will do post of why jQueryMobile/jQueryUI is flawed, but in short, css/skinning is completely over designed, and the component design are highly inefficient. So, jQueryMobile/jQueryUI are good for quick and dirty (but still good skin) apps, but when you want to create real custom application, use jQuery and go custom on top (and design with delegates for performance, and do not over partition our css)

  • Brian

    Doesn’t work on the iphone 4. Getting JS errors.

  • Stefano

    Thank you all, but I have a question though it may sempbrare stupid, how come when I load the downloaded files and they open the application should not be?, That I only open the html pages without seeing the “employees”.
    Why?
    thanks

  • sarath

    Chris,

    Can you do a similar employee directory application using Dojo Mobile? Will be very helpful

    Thanks

  • kim

    very thanks

  • agdish

    Why i get only a page with title and navbar??

  • santy

    alert(“Error accessing the server”);

    i changed config file then also same error displayed?

    • Goosh2

      Did you ever get this resolved? I am having the same issue (Error accessing the server).

    • Chema

      Did you figure out to resolve this?

      Thanks

  • How else can you package app without using phonegap as phonegap supports blackberry 5 OS and above. I need to target version 4 as well

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

  • Vrushali

    hEY HI I WANT TO DO THIS APP IN DOJO PLEASE HELP M

  • Somuraja

    Hi,
    Is it poosible to use jquerymobile and my jquery in same application?
    If it is possible can you give a sample

  • Wonderful application and also very useful.
    thanks

    Mani

  • somuraja

    alert(“Error accessing the server”);

    i changed config file then also same error displayed?

  • Vinay

    I am getting Error accessing the server

    the url opens fine though http://coenraets.org/apps/directory/services/getemployees.php

    Its going to the url , but no data is returned, i also did a firebug check.

    Any hint what may be the issue ?

    • Look in the employeelist.js file and change the localhost variable as yours could be different:

      var serviceURL = “http://localhost/directory/services/”;

  • how to change this application so as to take content from an RSS feed instead of the database?

  • Paul

    Basic, basic question. OK, you’ve built your employees mobile page and put it on to your server in a sub domain called m.employees. How do the phones know to go to your m.employees page and not your http://www.employees page?

    P.S. Possibly the best, clearest example of Jquery Mobile ever written. I’m off and running already.

  • urban

    Funny thing, i’m also having Error accessing the server, and can’t figure it out. But if i comple it with phonegap it works on my android. Any idea on how to test this on brower, so it works?

  • urban

    Figured out Error accessing the server. I was doing a XMLHttpRequest crossdomain. You cant do that.

  • alex

    alert(“Error accessing the server”);

    i changed config correctly with server codes but show this alert(“Error accessing the server”) ?

    please help me !!!

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

  • prabakaran

    hai,
    how do u navigate to other pages dynamically because for me clicking any emlpoyee in employee list it doesnt show particular empoyee details…will u help me…?

  • Howie

    Hi,
    I can run index.html fine and list the employees but clicking into the detail of an employee in employeedetails.html throws the “Error accessing the server” issue.
    Any suggestions?
    Thanks

    • I also like your fails “Error accessing the server” at employeedetails.html

      • lilia

        did u find solution ?

    • sathish

      Hi,
      I too had same problem

      goto getemployee.php line 13 and add this line

      $stmt->bindParam(“id”, $_GET[‘id’]);

      You should quote your array keys

      Thanks

  • help me to configure config.php and var serviceURL = “http://localhost/directory/services/”; on dreamweaver css5 on my machine

    • lilia

      did u find solution ?

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

  • jesus

    i have one problem “error accesing the server” what is the solution

  • Hafizur Rachman

    awesome post :D

  • Sunoj

    Is there a version of this with lazy loading of the list?

  • I like you blog ı shareds your works thanks

  • 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. gem hack for clash of clans

  • Any idea on how to test this

  • need helpings

  • ı love itttt

  • Hello,

    I’m new in database. I wanted to know, Where do I put my PHP files if I want to build an android app with a online database where every users can share their data ? I have a sql serveur.
    Please help me

  • ben bu sayfaya bayıldım harika

  • her zaman okuyorum paylaşımlar harika teşekkürler

  • takip ediyorum memnunum

  • Все качества продукции

  • Hi Christophe, You did a great tutorial that helps a lot of folks like me… especially in the area of communicating with web service in PHP.
    Thanks!

css.php