I'm trying to dynamically create a navbar from data i fetch from a web api serving json data. Here's the code: If i use:

    <div data-role="navbar">
      <ul>
        <li><a href="a.html">One</a></li>
        <li><a href="b.html">Two</a></li>
    </ul>
   </div>

directly in html code works fine, but this is not what im looking for. I want to be able to create the list elements from the data in the like the code in gist show. Anyone could point me in the right direction?

I'm trying to dynamically create a navbar from data i fetch from a web api serving json data. Here's the code: https://gist.github./2962277 If i use:

    <div data-role="navbar">
      <ul>
        <li><a href="a.html">One</a></li>
        <li><a href="b.html">Two</a></li>
    </ul>
   </div>

directly in html code works fine, but this is not what im looking for. I want to be able to create the list elements from the data in the like the code in gist show. Anyone could point me in the right direction?

• javascript
• jquery-mobile
• cordova

Share Improve this question Follow asked Jun 20, 2012 at 21:23 Luis D UrracaLuis D Urraca 2,08444 gold badges2626 silver badges4646 bronze badges 3

• Saw somewhere something about .trigger('create') to add Jquery Mobile to dynamically added elements but not sure how to use it. – Luis D Urraca Commented Jun 20, 2012 at 21:28
• What issues are you currently having with your present approach? – kinakuta Commented Jun 20, 2012 at 21:45
• The Jquery Mobile styling is not loading, its just loading the elements but not with classes that jquery mobile adds to the elements for the styling. – Luis D Urraca Commented Jun 20, 2012 at 21:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Once you have concocted your HTML for the navbar widget, you simply call .trigger('create') on the widget:

var myNavbar = $('<div data-role="navbar"><ul><li><a href="a.html">One</a></li><li><a href="b.html">Two</a></li></ul></div>');
$('#some-container').append(myNavbar).trigger('create');

Here is a demo: http://jsfiddle/Jde95/

This will trigger jQuery Mobile to initialize the widget.

For Example:

var url = "http://23.21.128.153:3000/regions.json";var jsonresults;
$.getJSON(url,function(data){
    var output = [];
    $.each(jsonresults, function(i,v){
        output.push('<li><a href="' + jsonresults[i].link + '">' + jsonresults[i].name + '</a></li>');
    });
    $('#main-content').append('<div data-role="navbar">' + output.join('') + '</div>').trigger('create'); 
});

Notice how I concocted the HTML, and used the .append() function.

I was having the same problem (I'm regenerating my navbar all the time, depending on the fetched data) and my solution has been the following:

var navBar = '<div id="invNavBarAction" data-role="navbar" data-iconpos="left"><ul>';
navBar += '<li>MANY LINES AS YOU NEED</li>';
navBar += '</ul></div>';
$('#invNavBarAction').remove();
$('#invNavBarContainer').append($(navBar));
$('#invNavBarAction').navbar();

HTML:

<div id="invNavBarContainer">
    <div id="invNavBarAction" data-role="navbar" data-iconpos="left"></div>
</div>