how to call a function to auto load elements in jquery mobile site

Question

What I want to do is to have my navbar HTML markup in one place ( for easy editing). Right now my index.html body content looks like:

<div data-role="page" id="SomePage">
    <div data-role="header">
        <h1>This is Page 1</h1>
    </div>
    <div data-role="navbar"></div>
</div>

and am calling the my files in the header as such:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" language="javascript" src="app.js"></script>

in my app.js file is where I am trying to load the nav bar. I have tried it 2 ways

The first:

var NavBar = function() {
$('div[data-role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

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

This results in the page getting the app to show my links, but they are stack like a normal ul without the list-style

The second way I tried it was:

var NavBar = function() {
$('div:jqmData[role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

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

This results in not seeing the links at all.

How do I create a function to load the 'navbar' in one place and use the jQuery Mobile styling?

The answer is ` $('[data-role="page"]').live('pagebeforecreate', function()` Instead of `$(document).ready` as outlined here: [link]http://jquerymobile.com/demos/1.0b1/docs/api/events.html, sorry I am logged into the worn account and it wouldn't let me answer my own question for another 7 hrs — Daniel Toebe, Mar 20 '13 at 15:33

score 1 · Accepted Answer · edited May 23 '17 at 12:21

document ready should not be used with a jQuery Mobile, it will usually trigger before page is loaded into the DOM. To find more about this topic take a look at this ARTICLE or find it HERE.

Instead you should use proper jQuery Mobile page events.

I made you a working jsFiddle example.

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});

Thanks I got it as you can see in my comment. Just tried your method which is simular to mine and works too — Daniel Toebe, Mar 20 '13 at 15:39

how to call a function to auto load elements in jquery mobile site

1 Answers1