Simple Navbar in Jquery Mobile not working

Question

I'm trying to do a simple jquery mobile navbar like the one shown here:

http://demos.jquerymobile.com/1.4.0/tabs/#&ui-state=dialog

The problem I'm having is that when I link to an html file, it loads without any styling or "jquery mobileness". Here are my snippets

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="Content/jquery.mobile-1.4.0.min.css" />
</head>
<body>
    <div id="homePage" data-role="page">
        <div data-role="header" data-position="fixed" >
            <h1>Header</h1>
        </div>
        <div data-role="tabs" id="tabs">
            <div data-role="navbar" >
                <ul>
                    <li><a href="maps.html" data-ajax="false">Map</a></li>
                    <li><a href="#events">Events</a></li>
                </ul>
            </div>
            <div data-role="content">
                <div id="events">
                    <ul data-role="listview" data-inset="true" data-divider-theme="b">
                        <li data-role="list-divider">1</li>
                        <li><a href="#">a</a></li>
                        <li><a href="#">b</a></li>
                        <li data-role="staclist-divider">2</li>
                        <li><a href="#">c</a></li>
                        <li><a href="#">d</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script src="Scripts/jquery.mobile-1.4.0.min.js"></script>
</body>
</html>

maps.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-divider-theme="a">
                <li data-role="list-divider">1</li>
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li data-role="list-divider">2</li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
            </ul>
        </div>

    </body>
    </html>

The #events id loads just fine. I'm expecting the content of maps.html (which is identical to the #events div) to load. Perhaps I'm misunderstanding how jquery mobile works, but the demo makes it look like what I'm doing is possible. Instead, I'm just getting something like this

unstyled

When I'm expecting this:

styled

I know I could just throw it all onto one page, but I'm really hoping not to. I'm also hoping not to repeat the header on every page. This seemed like a decent solution, but I feel like I might not be using the tools properly. I've tried googling and have found other examps, but I am not sure why mine isn't working.

Why do you have the `data-ajax` flag set to false for the map page? — Anid Monsur, Feb 11 '14 at 05:53
I've tried both. There's no difference. The example I copied from the jquery mobile site has it, so I put it. — Chris Cap, Feb 11 '14 at 06:01
maps.html is missing the page, header and navbar divs. Try adding these. — ezanker, Feb 11 '14 at 14:51
Unfortunately that does not work. Adding those just makes everything disappear. — Chris Cap, Feb 11 '14 at 15:44

score 0 · Answer 1 · answered Feb 12 '14 at 16:35

I think your maps.html should look like this:

<div class="tablist-content" data-role="content">
    <ul data-role="listview" data-inset="true" data-divider-theme="a">
        <li data-role="list-divider">1</li>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li data-role="list-divider">2</li>
        <li><a href="#">c</a></li>
        <li><a href="#">d</a></li>
    </ul>
</div>

No need to put the standard HTML header.

Simple Navbar in Jquery Mobile not working

1 Answers1