CODEWITHSUNDEEP
javascriptjqueryhtmlcordovajquery-mobile
DesperateEi
DesperateEi

Reputation: 144

Why is jquery mobile not working for Phonegap?

The day has come that I finally register here and have to ask my question because I am already so desperate.

I am starting a new Phonegap project and I want/need to use jquery mobile. I want to use a flipswitch (like shown here: http://demos.jquerymobile.com/1.4.3/flipswitch/). My problem is that neither this flipswitch nor other jquery mobile specific objects like buttons are displayed correctly. The flipswitch code for example only shows a normal checkbox.

The includes (js and stylesheet) for jquery mobile should be correct (also the path).

I don't think that it has something to do with Phonegap. Even if I cut out all the Phonegap specific code and open the remaining code in a browser (tried Firefox and Chrome) only a checkbox gets displayed and no flipswitch. Or am I doing something else completely wrong?

I use the following code:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.css">
    <script src="jquery/jquery.js"></script>
    <script src="jquery/jquery.mobile-1.4.5.js"></script>
    <title>Home Automatization</title>
  </head>

  <body>
    <div class="app">
      <form>
        <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
        <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
      </form>
      <button class="ui-btn ui-corner-all">Button</button>
    </div>
  </body>
</html>

If anyone could help me I would appreciate it very very much and thank you a thousand times.

Upvotes: 3

Views: 1785

Answers (1)

fridge_light
fridge_light

Reputation: 436

In this example I've commented out your index.css file and replaced the other JavaScript and CSS paths with the CDN snippet from https://jquerymobile.com/download/ - you should find this works correctly:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>Home Automatization</title>
  </head>

  <body>
    <div class="app">
      <form>
        <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
        <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
      </form>
      <button class="ui-btn ui-corner-all">Button</button>
    </div>
  </body>
</html>

If this works, put your index.css file back in and test again. Add in your original paths one by one and test - be sure to check your browser console for errors.

Upvotes: 2

Related Questions