2

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.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373

1 Answers1

2

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.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Gajotres, the pagecreate trigger did help a little, but the li element never turned into class="ui-block-a". It just added class="ui-link" to the link is all. – Phillip Senn Apr 02 '13 at 14:30
  • I have added new content to my answer, take a look and ask me if you don t understand something. – Gajotres Apr 02 '13 at 15:34
  • 1
    Thanks Gajotres! We're at the proof-of-concept phase of the program, so when something gets hard ("Dynamic adding of navbar elements is buggy and it is not working as intended"), I just back up a little and simplify things. I think what I'll do is use buttons instead of the navbar since things seem to be buggy with the navbar. But who knows, in an hour or so, I'll probably be asking about how to style buttons dynamically as well. I'll read the other two articles first though. – Phillip Senn Apr 02 '13 at 15:43
  • Hehehe dont worry, if you have more questions, feel free to ask. – Gajotres Apr 02 '13 at 15:44