Changed Jquery Mobile's Default Icon Set, Work on Browser, Failed on Device

jQuery Mobile's icon changes not show in phonegap

ok, I added !important to the end and that works:

.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) !important/*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius:              9px;
border-radius:                      9px;
}

jquery mobile data-icon not appearing on a mobile device

I think I may have solved this. When upgrading from jQuery mobile beta 2 to 3, I did not upgrade the corresponding images as well. Grabbing the updated images seems to have done the trick.

Phonegap ( + jquery mobile) app works fine on browser but not on device

This should work:

1. Move your script block inside a page div, like this:

   <div data-role="page" id="page1">
       <div id="register_button" data-role="button" data-transition="slide">
           Register
       </div>
       <script>
           $(document).on('pageinit','[data-role="page"]',function(){
               $('#register_button').click(function(){
                   $('#error_message_label').text('E-mail not set.');
                   $('#error_message').show();
               });
           });
       </script>            
   </div>
   

2. Also change your click handling so you final code will look like this:

   <div data-role="page" id="page1">
       <div id="register_button" data-role="button" data-transition="slide">
           Register
       </div>
       <script>
           $(document).on('pageinit','[data-role="page"]',function(){
               $(document).on('click','#register_button', function(){
                   $('#error_message_label').text('E-mail not set.');
                   $('#error_message').show();
               });
           });
       </script>            
   </div>
   

EDIT :

Why should it be inside a page div was just a hunch. You didn't explain how you app works so it make me think. jQuery Mobile has one common problem that people usually don't know about, it simply is not described in official documentation. If you use several HTML files, only first HTML file will be fully loaded into the DOM, every other page will load only page div and jQuery Mobile will discard everything else. Read more about it here.

Other possibility was a problem with a click event. Problem is that click event sometimes if platform is slow will not be bound to the correct object. That's why I have used a delegated click binding. It will bind a click event to a document and later it will propagate it to correct element. Basically it doesn't matter if element exist in DOM or not, cause this kind of binding cares only about document object.

Default jQuery Mobile CSS styling won't apply, multiple browsers tested

After noticing the console error "Uncaught Security Error Failed to Execute Replace State on History..." in Chrome, I searched Stack Overflow and found that Chrome has security features that seem to somehow block this loading from an external source?

I tried loading the page from a web server and alas, the CSS renders in Chrome!
It also works on Firefox locally! Chrome is the browser that wasn't letting me test locally...

See:
Uncaught SecurityError: Failed to execute 'replaceState' on 'History': cannot be created in a document with origin 'null'

Turn off jQuery Mobile when accessed from non-mobile device

Edit:
If you are using still modernizr's utility api after detecting if mobile or desktop stackoverflow how to detect mobile, modernizr comes with a dynamic script and css loader called yepnope.js, which you can use to inject JQM js and css when needed. There are alternatives of course for example, require.js, LAB.js etc.. you might need to look at if they fit your need

jquery mobile and Internet Explorer are not working at all

Is this page working with your IE9?

If yes, it is unfortunately Alpha3 of jQuery Mobile, but perhaps these fixes will work for you:

// Fix for IE9 and experimental jQuery Mobile Datepicker
//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function(){
    //reset type=date inputs to text
    $.mobile.page.prototype.options.degradeInputs.date = true;
    $.extend($.mobile, {
        //extend gradeA qualifier to include IE7+
            gradeA: function() {
                //IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
                    var ie = (function() {
                        var v = 3, div = document.createElement('div'), a = div.all || [];
                            while (div.innerHTML = '<!--[if gt IE '+(++v)+']><br><![endif]-->', a[0]);
                                return v > 4 ? v : !v;
                    }());
                    //must either support media queries or be IE7+
                    return $.support.mediaquery || (ie && ie >= 7);
            }
    });
});

You have to put these lines of code between query.js and query.mobile.js.

---

Related Topics