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/jquery.mobile.navigation.js js/jquery.mobile.navigation.js
index f85a491..181b9c9 100755
--- js/jquery.mobile.navigation.js
+++ js/jquery.mobile.navigation.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 = $link.data("rel") === "dialog";
 
                        //if ajax is disabled, exit early
-                       if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
+                       if( !$.mobile.ajaxEnabled && !isTargetDialog && !path.isEmbeddedPage( href ) ){
                                httpCleanup();
                                //use default click handling
                                return;

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.