How to load dynamic footer tabs using jquerymobile in phonegap app?

Question

I am using jQuery Mobile for my PhoneGap application in Xcode. I have created several tabbed pages in the footer. It works correctly on a static page as follows.

<div data-role="footer" data-position="fixed"> <div data-id="mainTab" data-role="navbar"> <ul id="footer_tabs"> <li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li> <li><a href="my_favorite_page.html" data-icon="star" data-transition="slideup">Favorites</a></li> <li><a href="my_account_page.html" data-icon="gear" data-transition="slideup">Account</a></li> <li><a href="create_ad_page.html" class="ui-state-persist ui-btn-active" data-transition="slideup" data-icon="plus">Create Ad</a></li> </ul> </div> <div> 

When I tried to load tabs according to user role. HTML code on page:

 <div data-role="footer" data-position="fixed"> <div data-id="mainTab" data-role="navbar"> <ul id="footer_tabs"> </ul> </div> <div> 

JQuery Code:

 $('#footer_tabs').append('<li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>'); $('#footer_tabs').append('<li><a href="my_favorite_page.html" data-transition="slideup" data-icon="search">Favorite</a></li>'); $('#footer_tabs').append('<li><a href="my_account_page.html" data-transition="slideup" data-icon="search">Account</a></li>'); if(userRole == '3'){ $('#footer_tabs').append('<li><a href="create_ad_page.html" data-transition="slideup" data-icon="search">Create Ad</a></li>'); } $('#footer-tabs').listview('refresh'); 

Static load image:

Loading image from jQuery:

I also updated the list, but did not work. I do not know what's the problem. Please help me.

Thanks, -regeint

Answer 1

I'm not sure how you refresh a nabvar in the jQuery Mobile framework, but I know that you can remove the previous navbar and insert a new one:

 //create an output variable, I used an array var output = ['<div data-id="mainTab" data-role="navbar"><ul id="footer_tabs">']; //push items onto the output array output.push('<li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>'); output.push('<li><a href="my_favorite_page.html" data-transition="slideup" data-icon="search">Favorite</a></li>'); output.push('<li><a href="my_account_page.html" data-transition="slideup" data-icon="search">Account</a></li>'); if(userRole == '3'){ output.push('<li><a href="create_ad_page.html" data-transition="slideup" data-icon="search">Create Ad</a></li>'); } output.push('</ul></div>'); //this last line is important, the output array is being joined into a string, then appended to the footer element, //also the `create` event is being triggered on the footer element so the jQuery Mobile framework will update the widget with all the necessary styles $('[data-role="footer"]').html(output.join('')).trigger('create'); 

Here is a demo: http://jsfiddle.net/ZVGSZ/

Note that I created an array of HTML strings, and then join combined them together to make one .append() , not an append for each HTML string ( .html(string) == (.remove() + .append(string)) ).

Answer 2

I don't have a reputation to thank Jasper, but this is a great solution.

Just wanted to add here that I did the same and used an empty navigation bar for submission, so in html theres an empty div:

 <div data-role="navbar" data-iconpos="left" id="PageLinks"> 

then in the script:

 $('#PageLinks').html(footerLinks.join('')).trigger('create'); 

target it - may be useful if people have a multi-page file.

Thanks again