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.

36 Responses to Sample App: Mobile jQuery without jQuery Mobile

  1. derrick grigg October 14, 2011 at 1:09 pm #

    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.

  2. Matt October 14, 2011 at 2:20 pm #

    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.

  3. R.D. Miller October 30, 2011 at 11:07 pm #

    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?

  4. Jeremy Chone November 7, 2011 at 1:13 pm #

    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)

  5. Brian December 28, 2011 at 5:26 pm #

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

  6. Stefano December 30, 2011 at 12:37 pm #

    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

  7. sarath January 4, 2012 at 12:10 am #

    Chris,

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

    Thanks

  8. kim February 4, 2012 at 8:16 am #

    very thanks

  9. agdish February 12, 2012 at 4:19 pm #

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

  10. santy February 29, 2012 at 11:50 am #

    alert(“Error accessing the server”);

    i changed config file then also same error displayed?

    • Goosh2 March 13, 2012 at 3:00 am #

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

    • Chema April 4, 2012 at 7:06 pm #

      Did you figure out to resolve this?

      Thanks

  11. balogunk March 18, 2012 at 9:37 pm #

    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

  12. Vrushali March 26, 2012 at 8:42 am #

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

  13. Somuraja April 4, 2012 at 8:29 am #

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

  14. Manigandan K May 4, 2012 at 9:33 am #

    Wonderful application and also very useful.
    thanks
    -
    Mani

  15. somuraja May 24, 2012 at 4:01 pm #

    alert(“Error accessing the server”);

    i changed config file then also same error displayed?

  16. Vinay May 25, 2012 at 6:30 am #

    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 ?

    • Pexsol Interactive June 8, 2013 at 12:31 pm #

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

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

  17. oxido June 10, 2012 at 10:20 pm #

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

  18. Paul July 17, 2012 at 9:48 am #

    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.

  19. urban September 29, 2012 at 11:01 am #

    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?

  20. urban September 29, 2012 at 12:19 pm #

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

  21. alex July 6, 2013 at 5:17 pm #

    alert(“Error accessing the server”);

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

    please help me !!!

  22. prabakaran September 12, 2013 at 4:06 am #

    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…?

  23. Howie October 4, 2013 at 8:14 am #

    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

    • TuanPhan November 3, 2013 at 3:55 am #

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

      • lilia March 10, 2014 at 5:02 pm #

        did u find solution ?

    • sathish January 6, 2014 at 4:18 am #

      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

  24. seroney January 2, 2014 at 4:24 pm #

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

    • lilia March 10, 2014 at 5:03 pm #

      did u find solution ?

Trackbacks/Pingbacks

  1. Sample Application using jQuery Mobile and PhoneGap - October 14, 2011

    [...] posted a version of the same application built using plain jQuery here. Filed Under: JQuery, JQuery Mobile, [...]

  2. Elegant D » Sample App: Mobile jQuery without jQuery Mobile - October 14, 2011

    [...] Source: jquery – Google Blog Search [...]

  3. Aplicación de ejemplo usando jQuery Mobile y PhoneGap « desarrollophpsenior - March 22, 2012

    [...] I posted a version of the same application built using plain jQuery here. [...]

  4. Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Programación de Dispositivos Móviles - September 11, 2013

    [...] I posted a version of the same application built using plain jQuery here. [...]

  5. Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Centro Inca - March 28, 2014

    […] I posted a version of the same application built using plain jQuery here. […]

Leave a Reply

css.php