Question

I have the following jQuery Mobile HTML code, the navbar’s content is set using javascript. jQuery mobile styles the navbar when it’s set statically, but when you set the content of it (html) later using javascript, you have to do some extra work to make it work:

    <div data-role="header">
        <h1 id="title">App</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">    
        <p>Loading...</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" id="navbar">
            <ul id="menu">
            </ul>
        </div>
    </div><!-- /footer -->
</div><!-- /page -->

trigger('create'); is generally used to solve the problem of unstyled markup when set using javascript/ajax. However, it seems only to work within data-role="content" and not for #navbar. The script below should work but leaves the menu unstyled…

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>").trigger('create');
});

Any ideas how to solve this? I have tried page(); and .listview('refresh'); with no results.

Answer 1

Try calling the navbar method after appending the list item:

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>");
    $("#navbar").navbar(); 
});

Edit:
You could also try creating the navbar dynamically :

var footer = $("#footer-id");

var navBar = $("div", {
    "data-role":"navbar",
    "html":"<ul><li><a href='#'>Test Styling</a></li></ul>"
}).appendTo(footer).navbar();