$.mobile is undefined (Worklight + jQuery Mobile)

I have main html:

<!DOCTYPE html>     
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>Home</title>
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">

    <div data-role="page" id="homePage">
        <div data-role="header"><div class="ui-title">Home</div></div>
        <div data-role="content" style="text-align: center">
            <a data-role="button" id="login" class="fullWidth">Login</a>
        </div>
    </div>

    <script src="js/initOptions.js"></script>
    <script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/messages.js"></script>

</body>

Then in Home.js:

// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;

function wlCommonInit(){
    // Common initialization code goes here
}

$("#homePage").live('pagecreate', function(event,ui) {
    $('#login').click(function(){
        $.mobile.changePage($('#nextPage.html'));
    });
});

When I tap on login button, it gives error $.mobile is undefined on this line:

$.mobile.changePage($('#nextPage.html'));

Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.

Finally I solved this issue by:

<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>

and later in js:

jq.mobile.changePage("the.html");

instead of

$.mobile.changePage("the.html");

Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.

Additionally, move the reference to jQuery Mobile to the HEAD a as well.

Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>testapp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="stylesheet" href="css/testapp.css">
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
    <script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
    <div data-role="page">
    testapp

    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/testapp.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>

I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console

Works... I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).

You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).

来源：https://stackoverflow.com/questions/16577872/mobile-is-undefined-worklight-jquery-mobile

标签

jquery-mobile

ibm-mobilefirst