jQuery Mobile not working with PhoneGap

Question

I am working on a PhoneGap application and am using jQuery Mobile. The last time I was working on the project it was looking great, but now jQuery Mobile stopped working. What's going on?

Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    </head>

    <body>
        <div id="page" data-role="page" data-theme="b">
            <div data-role="content">
            <h2>Login To Carpool Mobile</h2>
            <p align="right"><a href="registration.html" id="showregistration">Don't have an account? &rarr;</a></p>
                <form method="post" id="loginForm">

                    <label for="password">Email:</label>
                    <input class="required" type="text" name="username" id="username" placeholder="username@target.com">

                    <label for="password">Password:</label>
                    <input class="required" type="password" name="password" id="password" placeholder="password">

                    <input type="button" value="Login" id="submitButton" onClick="handleLogin()">
                </form>
            </div>
        </div>

        <script>
        $(document).ready(function() {
            checkPreAuth();
        });
        </script>
    </body>
</html>

If it is not a problem, mail me your project and I will fix it for you. Nothing here should cause jQM to load without its style. — Gajotres, Mar 19 '13 at 21:23
Did you get the solution? I have the same issue, even simple page is not working when I am adding jquery mobile js but without adding js file it is working fine in emulator. — Jaya Vishwakarma, Oct 16 '14 at 02:30

score 2 · Answer 1 · answered Jun 27 '13 at 20:58

PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.

The solution you are looking for, I believe, is this line:

<access origin="http://code.jquery.com" subdomains="true" />

You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!

Hi, do you have a gist that shows exactly where that line goes? — JGallardo, Nov 10 '13 at 18:33

Jay Mayu · Answer 2 · 2013-03-20T04:09:43.867

You can't use below one with jQuery Mobile

$(document).ready(function() {
    checkPreAuth();
});

You need to use custom jQuery Mobile specific events. You may have to change your code as below.

$('#page').live('pageshow', function(event){
    checkPreAuth();             
});

Check documentation for more relevant events.

From your code I can notice that you are using very old libraries of both jQuery and jQuery Mobile. I would recommend you to upgrade to the latest library which will enable you to use much more features than what you have in your current version.

Here is an example with latest framework from jsfiddle.

score 0 · Answer 3 · answered Dec 10 '14 at 15:12

I don't have any problem with your code apart that checkPreAuth(); is not defined. You should also try to update your version of query and jquery mobile. I will recommend that you download and include should include the JQuery mobile and Jquery files( script files) in your www project directory

score -1 · Answer 4 · edited Nov 30 '14 at 12:04

-1

Remove the $(document).ready(function() and keep checkPreAuth(); inside the deviceready event of PhoneGap.

edited Nov 30 '14 at 12:04

Peter Mortensen

30,738
21
105
131

answered Mar 19 '13 at 21:11

Nishanth Nair

2,975
2
19
22

That is a wrong approach. You should not call the function before loading the dom. – Jay Mayu Mar 20 '13 at 03:55
I do that in my project and it works great.The file is loaded from local dir so when it hits the script tag, the DOM is loaded. – Nishanth Nair Mar 20 '13 at 12:53
This is correct for normal jQuery projects but not for jQuery Mobile projects. Check out awesome explanation by Gajotres here http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events/14469041#14469041 – Jay Mayu Mar 20 '13 at 13:01
In PhoneGap DOM is always loaded from local file. So this check is not required if u write our init code in the scripts tag. we do that all the time. – Nishanth Nair Mar 20 '13 at 13:04
I think you don't get the point. the way jQuery-Mobile loads the files into DOM is different (It uses ajax). It may seem correct but you'll end up with peculiar bugs. – Jay Mayu Mar 21 '13 at 06:54
@MayuMayooresan - I do get the point. All UI frameworks works the same way. My expertise is more with Kendo UI Mobile. – Nishanth Nair Mar 21 '13 at 09:45

jQuery Mobile not working with PhoneGap

4 Answers4