CODEWITHSUNDEEP
javascriptjqueryjquery-mobilerequirejs
Mick
Mick

Reputation: 695

data-role not displaying only one page in jqm

I'm having some problems getting jquery mobile to work properly. I'm using the anatomy of a page and this stackoverflow example.

The output I'm expecting is for jqm to only show the contents of the first data-role in the code. However, what's actually happening is after jqm loads, it sets the view to the size of the browser window, but still shows the contents of the second data-role plus the words "loading" beneath it.

I'm pretty sure I'm missing something very simple. Any help will be greatly appreciated.

I'm using PhoneGap and RequireJS.

Here is the code:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="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/app.css" />
    <title>Student Picker</title>
</head>
<body>
    <div data-role="page" id="test1">
        <a href="#test2">Goto Test2</a>
    </div>
    <div data-role="page" id="test2">
        <a href="#test1">Goto Test1</a>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

require.config({

baseUrl: 'js',
paths: {

    'jquery': 'jquery',
    'jquery.mobile.config': 'jquery.mobile.config',
    'jquery.mobile': 'jquery.mobile',
    'app': 'app'
},
map: {

    '*': {'jquery': 'jquery-private'},
    'jquery-private': { 'jquery': 'jquery' }
},
shim: {

    'jquery.mobile.config': ['jquery'],
    'jquery.mobile': ['jquery', 'jquery.mobile.config']
}
});

require(['jquery', 'app', 'jquery.mobile'], function(jq, app) {

jq(function() {

    //app.initialize();
});
});

jquery.mobile.config

define(['jquery'], function (jq) {

jq(document).on("mobileinit", function () {

    jq.mobile.ajaxEnabled = false;
    jq.mobile.linkBindingEnabled = false;
    jq.mobile.hashListeningEnabled = false;
    jq.mobile.pushStateEnabled = false;
});
});

Picture of the output:

Output

The results are the same with or without the jqm config file. If you need any more information, please feel free to leave a comment :)

Upvotes: 0

Views: 62

Answers (1)

Mayank Krishan
Mayank Krishan

Reputation: 84

CSS file corresponding to the JQM file is missing in the code.

Add CSS file and it should work because "data-role" works as a CSS selector.

Upvotes: 1

Related Questions