CODEWITHSUNDEEP
jqueryiphonexcodejquery-mobilecordova
regeint
regeint

Reputation: 888

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

I am using jQuery Mobile for my PhoneGap app in Xcode. I have created multiple pages having tabs in footer. It works properly in 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 in 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');

Picture of static loading: enter image description here

Picture loading from jQuery: enter image description here

I have refreshed the list too, but not working. I don't know what the problem is. Please help me.

Thanks, -regeint

Upvotes: 6

Views: 7702

Answers (2)

Bodkins
Bodkins

Reputation: 51

I dont have the rep to thank Jasper as well, but its a great solution.

Just wanted to add here that I did the same and used a blank navbar to feed into, so in the html theres a blank div:

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

then in the script:

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

targets it - might be useful if people have multi-pages in their file.

Thanks again

Upvotes: 0

Jasper
Jasper

Reputation: 75993

I'm not sure how you refresh a nabvar widget in the jQuery Mobile framework but I know that you can remove the previous navbar and insert a fresh 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/

Notice that I created an array of HTML strings and then joined them together to do a single .append() rather than an append for each HTML string (.html(string) == (.remove() + .append(string))).

Upvotes: 3

Related Questions