Monday, December 26, 2011

JQuery Mobile for web-based forms applications

As a consulting company, OpenArc, does a fair number of web-based forms applications for customers across a wide range of industries. In the last several months, we've really taken to using jQuery Mobile (JQM) for many of these applications.

As is typical for applications of this type, a clean and usable interface is far more important to our customers than a sexy/flashy look and feel. JQM gives us an easy framework to produce a modern looking UI, tailored with the jQuery Mobile Themeroller, customized to match the client's brand requirements. Our clients are also very happy to know their applications can be accessed from a wide array of mobile devices.

Here's a few screenshots from just one of these applications:

First, a dashboard of sorts:

A listing page, with the ever so useful "data-filter: true" attribute:

Finally, a meeting edit page showing a time picker control, still in progress:

We've had a few glitches along the way, but in general, our clients are very pleased with a JQM based UI. This makes us very happy too!

One issue we saw early on was the default ajax-based navigation not playing well on IE*, so for now we've disabled it via:
$.mobile.ajaxEnabled = false; $.mobile.pushStateEnabled = false;
Normally, dialog boxes in JQM do not require full HTML pages, just HTML snippets (e.g. :layout => nil) as they are loaded via AJAX and work like jQuery UI dialogs.

However, when you set "$.mobile.ajaxEnabled = false" JQM will no longer load dialogs via ajax, EVEN if you set "data-ajax=true" on the dialog links. That seems like a bug to me, ignoring "data-ajax=true". A patch to fix the problem:
diff --git js/ js/
index f85a491..181b9c9 100755
--- js/
+++ js/
@@ -1322,10 +1322,11 @@
var baseUrl = getClosestBaseUrl( $link ),

//get href, if defined, otherwise default to empty hash
- href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl );
+ href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl ),
+ isTargetDialog = $"rel") === "dialog";

//if ajax is disabled, exit early
- if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
+ if( !$.mobile.ajaxEnabled && !isTargetDialog && !path.isEmbeddedPage( href ) ){
//use default click handling

My only hope at this point is to see an expanded set of controls/plugins, ideally such that we'd no longer have need of jQuery UI.

No comments: