jquery - dynamically populate into navigation bar from javascript -

this jquery mobile page header section want populate dynamically populated data javascript navigation bar in code.

<div data-role="page" data-theme="a" id="homepage"  >     <div data-theme="a" data-role="header" data-position="fixed">         <h3 class="mblheading">client</h3>         <a href="#assignedwi" data-icon="home" data-transition="slide" data-theme="a"></a> <a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#aboutdialog" class="ui-btn-right"> </a>         <div data-role="navbar" >             <ul id="navid">                 <li><a href="a.html">one</a></li>                 <li><a href="b.html">two</a></li>             </ul>         </div>     </div> 

my java script code dynamically populating content.here querytableid navid.navigationlist array

function populatequerylist4(querytableid) {     var listparent = jq(querytableid);     listentry = document.createelement("li");     anode = document.createelement("a");      anode.innerhtml=navigationlist[k-1];      listentry.appendchild(anode);      anode.onclick = function() {         //displayartifactcontent(artifactareainfomap[wititle]);     };     listparent.append(listentry);     jq("#navid").navbar('refresh'); } 

unfortunately cant populate navbar that. functions navbar() , navbar('refresh') not going here, not trigger('create') or trigger('pagecreate'). reason, when dynamically add additional navbar item not styled should , error.

there 2 alternative ways how can done.

dynamically populate navbar during pagecreate or pagebeforecreate page venet.

basically during 2 events page style not styled according jquery mobile styles. added content @ point enhanced automatically.

here's working jsfiddle example you: http://jsfiddle.net/gajotres/sjg8w/

$(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>'); }); 

manually enhance dynamically added navbar items

other solution yourself. not complicated see in working example: http://jsfiddle.net/gajotres/v6nhp/

$('#index').live('pagebeforeshow',function(e,data){         navbarhandler.addnewnavbarelement('navbar-test','el4','page four'); });   var navbarhandler = {     addnewnavbarelement:function(navbarid, newelementid, newelementtext) {         var navbar = $("#" + navbarid);          var li = $("<li></li>");                 var  = $("<a></a>");         a.attr("id", newelementid).text(newelementtext);         li.append(a);          navbar = navbarhandler.clearnavbarstyle(navbar);          navbar.navbar("destroy");         li.appendto($("#" + navbarid + " ul"));         navbar.navbar();     },     clearnavbarstyle:function(navbar){         navbar.find("*").andself().each(function(){             $(this).removeclass(function(i, cn){                 var matches = cn.match (/ui-[\w\-]+/g) || [];                 return (matches.join (' '));             });             if ($(this).attr("class") == "") {                 $(this).removeattr("class");             }         });         return navbar;        } } 

comments

as can see method work must understand how jquery mobile page events work, find out more take @ other answer: jquery mobile: document ready vs page events.

also take @ other answer regarding enhancement of jquery mobile pages markup: jquery mobile: markup enhancement of dynamically added content