Search code examples
jquerycordovajquery-mobilejquery-mobile-themeroller

JQuery Mobile and Phonegap - not getting any JQuery Mobile css effects

I am trying to write an appw ith both JQuery Mobile and PhoneGap(Cordova).

So far Phonegaps behaving fine and I can do some simple animations with plain JQuery. I want to make use of JQuery Mobiles styling abilities, eg:

  <div data-role="header">

However, none of this comes through. Perhaps I have set this up wrongly? Ive compared to sample projects and it seems fine.

The header div should have a iOS looking black bar with a gradient, but it appears unstyled. Can anyone point me in the right direction?

My code is:

        <!-- JQM css-->
        <link rel="stylesheet" type="text/css" href="css/jqmcss.css" />
        <!-- Normal css-->
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <title>My App</title>
    </head>
    <body>
      <div data-role="page">
          <div data-role="header">
              <h1>Program</h1>
          </div><!--HEADER-->

<!--OTHER DIVS-->

   </div><!--PAGE-->

        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript" src="js/jquery.min.1.9.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
        <script type="text/javascript" src="js/myscripts.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
Solution

  • This is a common problem and it can occur in this situations:

    Incompatible jQuery and jQuery Mobile versions

    Because you have renamed your jQuery Mobile files I cant confirm this is the problem in your case. Basically jQuery Mobile developers have locked framework to certain jQuery versions. Fir example, if you use jQuery Mobile 1.2 with jQuery 1.9+ it will not work and pages will not be styled.

    So in your case go to their official site and download latest 1.3.1 jQuery Mobile files.

    Incompatible jQuery Mobile js and css files

    This error is similar to the previous case. jQuery Mobile is strict with its content.

    Again go to their official site and download these files:

    Minified: jquery.mobile-1.3.1.min.js
    Minified with Default theme: jquery.mobile-1.3.1.min.css