Dynamically changing a navbar

Question

When the user changes a setting, I want to change the navbar on the main page. I have:

<section id="main" data-role="page">
<nav data-role="navbar">
   <ul></ul>
</nav>
</section>

And I populate the unordered list with JavaScript, but it loses it's css styling.

Q: What event do I use to make sure the navbar is styled correctly when the user goes back from the "settings" page and sees the main page again?

Q: What event should I trigger to refresh the main page after the user presses the "back to the main page" button?

Edit:

Actually, the list is populated on pageinit as well.

Answer 1

Q1.

If you populate your navbar during the pagebeforecreate, pagecreate or pageinit you don't need to style it. In case you are doing it during the later events then do it with this:

$('#pageID').trigger('pagecreate');

This will trigger full page restyling, including footer and header. In case you need only to restyle page content then use this:

$('#pageID').trigger('create');

Read more about it in my other article: https://stackoverflow.com/a/14550417/1848600

Q2.

In this case you can prevent main page cashing and that would be that.

Official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html

To prevent page cashing use an attribute data-dom-cache="false" :

<div data-role="page" id="dontCacheMe" data-dom-cache="false">

But unfortunately if main page is a first page to be shown, or at least a part of first HTML then cashing can't be prevented.

In that case clear every element that has a generated content and trigger pagecreate again.

EDIT :

I forgot to mention. Dynamic adding of navbar elements is buggy and it is not working as intended. Some time ago I have created an example how to dynamically add navbar elements, you can find it here: http://jsfiddle.net/Gajotres/V6nHp/

This and more can be found in my other ARTICLE, or it can be found HERE.