9 Replies Latest reply on Aug 29, 2014 12:47 PM by Jon Tara

    JQM with Rhodes and Windows Phone

    Mark Nongkhlaw

      JQM directives like data-filter=true  on data lists don't show up, however the same works on WIN32(PC version) of the app.

      Doesn't the Internet Explorer on WP devices support JQM?

      Alternatively, is webkit for WP available?

        • Re: JQM with Rhodes and Windows Phone
          Jon Tara

          jQuery Mobile 1.3 Supported Platforms | jQuery Mobile


          What version?




          • Windows Phone 7.5-7.8 – Tested on the HTC Surround (7.5), HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800 (7.8)

          No other versions of Windows Phone are listed with any compatability at all.


          I would also search jQuery Mobile Issues on github for any gotchas with specific widgets.


          Rhodes comes with with JQM 1.3, but if you are starting a new project, I would drop-in JQM 1.4 instead. While 1.3 *might* work with newer Windows Phone, you can never be certain that some library supports newer devices that came out after it's release! That is an ongoing issue with *all* Javascript libraries. You really have to keep up-to-date!


          1.4 officially supports more Windows Phones, and is the current JQM version:


          jQuery Mobile 1.4 Supported Platforms | jQuery Mobile


          • Windows Phone 7.5-8 – Tested on the HTC Surround (7.5), HTC Trophy (7.5), LG-E900 (7.5), Nokia 800 (7.8), HTC Mazaa (7.8), Nokia Lumia 520 (8), Nokia Lumia 920 (8), HTC 8x (8)


          No JQM version supports any Windows Phone before 7.5.


          Note that JQM 1.4 is a significant change from JQM 1.3. You would have to carefully pursue the documentation if you are already familiar with 1.3.


          You should first test your device/browser with the online jQuery Mobile demos.

            • Re: Re: JQM with Rhodes and Windows Phone
              Mark Nongkhlaw

              Hi Jon,


              I missed your response. Looks like Jive is acting up again. I failed to get the email alert for your post.


              Anyway, my test device is the Nokia 720 with WP 8.0. But I'm still developing on a Windows 7 PC (app runs on this phone, however, sans the jQM bits)


              If I am to replace the existing JQM with 1.4, what are the steps to be followed?


              Additionally, this is my present layout.erb :


              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


              <html xmlns="http://www.w3.org/1999/xhtml">






                  <title>OASIS Mobile</title>



                  <% is_bb6 = System::get_property('platform') == 'Blackberry' && (System::get_property('os_version').split('.')[0].to_i >= 6) %>



                  <% if is_bb6 %>

                      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

                  <% else %>

                      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

                  <% end %>



                  <% if System::get_property('platform') == 'WP7' %>

                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

                  <% end %>



                  <% if System::get_property('platform') == 'APPLE' || System::get_property('platform') == 'ANDROID' || is_bb6 || System::get_property('webview_framework') =~ /^WEBKIT/ %>

                      <script src="/public/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>



                      <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0.min.css">

                      <link rel="stylesheet" href="/public/css/jqmobile-patch.css">

                      <% if System::get_property('platform') == 'APPLE' %>

                          <link href="/public/jqmobile/jquery-mobile-iphone.css" type="text/css" rel="stylesheet"/>

                      <% end %>



                      <script type="text/javascript">

                          $(document).bind("mobileinit", function(){

                              // jQuery-Mobile init options initialization goes here. For example, you may

                              // enable automatically generated 'Back' buttons on headers this way:

                              //$.mobile.page.prototype.options.addBackBtn = true;



                              // You can disable (with false value) or change page loading message

                              $.mobile.loadingMessage = false;

                              //$.mobile.loadingMessage = "loading"; // it is default value



                              // For documented init options look here:

                              // http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html



                              // For poorly documented options search for ".prototype.options"

                              // in the jQuery Mobile source code



                              // Rhodes custom option!

                              // how long to wait transition end before "loading.." message will be shown

                              $.mobile.loadingMessageDelay = 300; // in ms



                      <script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0.min.js"></script>

                      <script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>



                  <% end %>



                  <% if System::get_property('platform') == 'APPLE' %>

                      <link href="/public/css/iphone.css" type="text/css" rel="stylesheet"/>

                  <% elsif System::get_property('platform') == 'ANDROID' %>

                      <link href="/public/css/android.css" type="text/css" rel="stylesheet"/>

                  <% elsif is_bb6 %>

                      <link href="/public/css/android.css" type="text/css" rel="stylesheet"/>

                  <% elsif System::get_property('platform') == 'Blackberry' %>

                      <link href="/public/css/blackberry.css" type="text/css" rel="stylesheet"/>

                  <% elsif System::get_property('platform') == 'WP7' %>

                   <link href="/public/css/windows_mobile.css" type="text/css" rel="stylesheet"/>

                <script src="/public/js/wp7.js" type="text/javascript"></script>

                  <% elsif System::get_property('webview_framework') =~ /^WEBKIT/ %>

                      <link href="/public/css/android.css" type="text/css" rel="stylesheet"/>

                  <% elsif System::get_property('platform') == 'WINDOWS' %>

                   <link href="/public/css/windows_mobile.css" type="text/css" rel="stylesheet"/>

                  <% end %>





              <% if is_bb6 %>


              <% elsif System::get_property('platform') == 'WP7' %>


              <% end %>


                  <%= @content %>







              What changes are required in above layout.erb for either  jQM 1.3 (I'd like to test with this first) or jQM 1.4 for the


              <% if System::get_property('platform') == 'WP7' %>




              Sorry for the rather newbie question.

                • Re: JQM with Rhodes and Windows Phone
                  Jon Tara

                  Oh! Now I see you are using jQuery Mobile 1.0! You never updated it. Rhodes now comes with jQuery Mobile 1.3.1. So, you must have updated Rhodes, but you didn't update the jQuery Mobile files, patch CSS and JS. 1.0 doesn't support Windows Phone at all (I doubt that Windows Phone even existed yet when 1.0 was released.)


                  A-grade - Full enhanced experience with Ajax-based animated page transitions.

                  • Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)
                  • Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
                  • Android Honeycomb- Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
                  • Windows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)
                  • Blackberry 6.0 - Tested on the Torch 9800 and Style 9670
                  • Blackberry 7 - Tested on BlackBerry® Torch 9810
                  • Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5
                  • Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
                  • Palm WebOS 3.0 - Tested on HP TouchPad
                  • Firebox Mobile (Beta) - Tested on Android 2.2
                  • Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0)
                  • Meego 1.2 - Tested on Nokia 950 and N9
                  • Kindle 3 and Fire: Tested on the built-in WebKit browser for each
                  • Chrome Desktop 11-15 - Tested on OS X 10.6.7 and Windows 7
                  • Firefox Desktop 4-8 - Tested on OS X 10.6.7 and Windows 7
                  • Internet Explorer 7-9 - Tested on Windows XP, Vista and 7 (minor CSS issues)
                  • Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

                  B-grade - Enhanced experience except without Ajax navigation features.

                  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
                  • Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3
                  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

                  C-grade - Basic, non-enhanced HTML experience that is still functional

                  • Blackberry 4.x - Tested on the Curve 8330
                  • Windows Mobile - Tested on the HTC Leo (WInMo 5.2)
                  • All older smartphone platforms and featurephones - Any device that doesn't support media queries will receive the basic, C grade experience


                  As far as the Javascript and CSS are concerned, you just need to replace the existing files.


                  I don't think any of the Rhodes-supplied custom CSS and JS would work with 1.4, so you would need to remove those or rewrite them. I haven't used those in ages.


                  The CSS is just the Rhodes project's opinionated modifications to the CSS. You might agree with that opinion, or you may not. I prefer to start with what comes with jQuery Mobile and not worry about what somebody at RhoMobile though were some nice enhancements several years ago. I am referring to the various iPhone.css, etc. as well as any "patch" CSS file.


                  The JS jqmobile-patch.js is to to support wait page and other features that I don't use. I never load it either.


                  Unfortunately, it would be a big job to update from 1.0 to 1.4 if you have a lot of existing Javascript code and custom CSS overrides. It is quite different from 1.0. The big jump was from 1.3 to 1.4.