Dynamic Navbars..

Dynamic Navbars..

I need to dynamically add and remove buttons from a navbar and have a work in progress that *almost* works..

My navbar html looks like this:

<div data-role="footer" data-id="nav-footer" data-position="fixed" >   
   <div id="navbar" data-role="navbar" >
      <ul id="navcontent">
         <li><a>Loading..</a></li>
      </ul>
   </div>
</div>
     

When necessary I update the navbar as follows:

$('#navbar').navbar('destroy');
for each new button {
   $('#navcontent').append('<li><a .... </a></li>');
   $('#navcontent').trigger('create');
}; $('#navbar').navbar();

This almost works - the newly inserted buttons are styled properly and function, but they do not take up the full screen width and occasionally stack two deep vertically. Examing the dom for three newly inserted buttons shows #navcontent having class 'ui-grid-c' and #navcontent li having classes 'ui-block-b', 'ui-block-c' etc but no 'ui-block-a'.
  
Any suggestions?

I'm using JQM 1.2.0 and JQuery 1.8.1.

I would fiddle this but don't know how to setup JQM there..