8
votes

I'm developing an application using PhoneGap & jQuery Mobile.

I've completed the android version of the application. I'm using Adobe PhoneGap build to build my application. Android version is working perfectly. But now I'm trying to test the Windows Phone 8 version of the app.

I tested the PhoneGap build app.xap in Visual Studio 2012 emulator. It seems the jQuery mobile is not working. For testing purpose, I created a sample app. with two jQuery mobile page. That too is not working.

Please help me out. Any kinda help would be deeply appreciated. Thanks, =) Please tell me where've gone wrong.

Pasting my sample code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <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" />
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
    <link rel="stylesheet"  href="css/index.css" />
    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />

    <title>Hello World</title>
</head>
<body>
    <div data-role="page" id="page1">
<div data-theme="a" data-role="header">
    <h3>
        Header
    </h3>
</div>
<div data-role="content">
    <a data-role="button" href="#page2">
        Button
    </a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        Footer
    </h3>
</div>
</div>

    <div data-role="page" id="page2">
<div data-role="content">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
    width="288" height="200">
    <a data-role="button" href="#page1">
        Button
    </a>
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li>
                <a href="#page1" data-transition="fade" data-theme="" data-icon="">
                    Button
                </a>
            </li>
        </ul>
    </div>
</div>
</div>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

This is what I got as output:

enter image description here

This is what i need :

enter image description here

6

6 Answers

5
votes

jQuery Mobile does not support Windows Phone 8 officially. See the supported platforms: http://jquerymobile.com/gbs/

0
votes

change your page as below and make sure emulator has access to internet

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <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" />
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
    <link rel="stylesheet"  href="css/index.css" />
    <link rel="stylesheet"  href="http://jquery.mobile/jquery.mobile-1.1.0.css" />
    <script type="text/javascript" src="http://jquery.mobile/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://jquery.mobile/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>

    <title>Hello World</title>
</head>
<body>
    <div data-role="page" id="page1">
<div data-theme="a" data-role="header">
    <h3>
        Header
    </h3>
</div>
<div data-role="content">
    <a data-role="button" href="#page2">
        Button
    </a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        Footer
    </h3>
</div>
</div>

    <div data-role="page" id="page2">
<div data-role="content">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
    width="288" height="200">
    <a data-role="button" href="#page1">
        Button
    </a>
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li>
                <a href="#page1" data-transition="fade" data-theme="" data-icon="">
                    Button
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

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

    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>
0
votes

Put the Cordova file the HEAD and ensure it is the first JS file in the page:

JQM works fine on Windows Phone ... i had issues similar to yours and this fixed it.

0
votes

In fact JQuery mobile work fine with windows phone 8.

The correct order to load js files is:

load JQuery itself; load JQuery Mobile css files only; load your custom scripts and css; load phonegap (cordova) if needed; load JQuery Mobile as last one.

This order work fine for me on any device, including windows phone 8 (device or VS2012 emulator) Usually I'm loading all this stuff in HEAD section of my index.html. If you have any doubt, you can test your project directly in VS2012 using Cordova template as described here

Hope this help.

0
votes

I am seeing the same issue in the WP8 emulator in VS2012 on Windows8. If I make a local copy of the jQuery files it works. If I try to load them from CDN they do not.

<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>

WORKS.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Does not work and looks unstyled.

I made local copies of all of the Jquery and Jquery mobile js and CSS files, and my JQM UI looks exactly like I would expect.

Although, I am still curious if there is some whitelist feature of the emulator that is not working right. or if there is a config for the hyper-v switch manager that does not work properly out of the box.

0
votes

I followed this link and install phonegap templates in VS 2013. Then I create a project using phonegap template and downloaded jquery files and include them in my html file and it works like a charm :) For some reason CDN reference to Jquery doesn't work with windows phone simulator.

Here is the order you may reference Jquery,

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <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="css/jquery.mobile-1.4.2.css" />
    <!--<script type="text/javascript" src="cordova.js"></script>-->
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/jquery.mobile-1.4.2.js"></script>
    <title>Hello World</title>
</head>