Search code examples
mobilejquery-mobilejqueryfooter

Jquery mobile ui-btn-active in navbar

I've been trying to get this to work for 4 days now, with no luck.

I have a very simple jquery mobile app. The app has a header, content and footer. The footer is being generated dynamically on the 'pagecreate' event because it is always the same and I don't want to have its HTML in every page.

So I do something like this:

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));

});

DrawHeader() and DrawFooter() simply prepent the header div to the page and append the footer div. SetFooterEvents() sets the onclick events of the footer navbar buttons and SetActiveFooter() is SUPPOSED to set the ui-btn-active to the current active footer link. To do this, I've added the data-active-footer attribute to the page div and the data-name attribute to the navbar elements. I'm searching for the current element according to the data-active-footer in the page and apply the ui-btn-active class.

function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
    .find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");}

So far so good.

Now, say I've changed to a page and the navbar is lit (it has successfully recieved the ui-btn-active class), and I'm clicking on the previous page, the lit item in the navbar doesnt change back!
If i click on the the page again (ie: changed to second page [corrent lit], changed back to first page [second page is still lit], then clicked on first page again) it does light the navbar button.

What I found out was that jqm also changed the navbar of the previous page when I'm changing the navbar of the current page in the 'pagecreate' event. I've tried to overwrite this behaviour using the 'pageshow' event, that is, trying to apply the ui-btn-active class to the current element in the navbar but the problem is that $(this) and e.currentTarget objects in the 'pageshow' event DO NOT CONTAIN THE FOOTER ELEMENT!!!

$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0

alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});

Any ideas?!

Thanks.

Solution

  • I still dont know why but jqm moves the footer from page to page, eventhough I assign a new footer to each page. Maybe because I set the same ID to all of them.

    Anyhow, I used this workaround to solve the problem: On the 'pagebeforeshow' event, I set the button I want active to all the footers in the documents. I've set a special data-name attribute to each navbar button, I give it the 'ui-btn-active' class after removing it from the rest of the items.

    var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");