CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
MarkZ
MarkZ

Reputation: 280

NavBar Item in Footer

I have one problem need help.

My jquery mobile page, if I put the Navbar content static into the page:

<div data-role="footer">        
    <div id='footerButton' data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

The navbar button display Horizontally button nicely and automatically equal the width of each button.

But if I leave the Navbar DIV empty and dynamically insert the UL and LI:

$('#userMainPage').on('pagebeforecreate', function() {
    $('#footerButton').html('<ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>');
});

With the above code, the Item will not listed as Horizontal. It will became Vertical li without button styling.

May I know what is wrong with my code to insert the content dynamically? Please advice, thank you.

Upvotes: 2

Views: 248

Answers (1)

Omar
Omar

Reputation: 31732

The pagebeforecreate event doesn't emit on page, it emits on document. Thus, you can't bind it to a specific page.

 /* has no effect on #pageID */
$("#pageID").on("pagebeforecreate", function (event)
$(document).on("pagebeforecreate", "#pageID", function (event)

/* to know which page is going to be created */
$(document).on("pagebeforecreate", function (event) {
  console.log(event.target);
});

/* this works, but you'll need to enhance dynamically added elements manually */
$(document).on("pagecreate", "#pageID", function (event) {
  /* do something */
  $("footer").append( $("<div data-role='navbar'></div>").navbar() );
});

In light of the above, if you want to perform something on pagebeforecreate event based on page that is being created:

$(document).on("pagebeforecreate", function (event) {
  var page = event.target.id;
  if(page == "pageID") {
    /* do something */
  }
});

Demo

However, since pagecreate and pagebeforecreate fires ONCE per page, if you want to change Navbar every time a specific page is shown, you need to utilize pageContainer events, e.g. pagecontainershow. Those events don't emit on a specific page as well, so you need to retrieve ActivePage's id.

Note that you will also need to inject "fresh/new" Navbar since this widget has no refresh methods.

$(document).on('pagecontainershow', function (event) {
  /* retrieve ID of active page */
  var page = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
  if (page == "page1") {
    $('[data-role=footer]').html($("<div id='footerButton' data-role='navbar'><ul><li><a href='#'>One</a></li><li><a href='#'>Two</a></li><li><a href='#'>Three</a></li></ul></div>").navbar());
  } else {
    $('[data-role=footer]').html($("<div id='footerButton' data-role='navbar'><ul><li><a href='#'>Four</a></li><li><a href='#'>Five</a></li><li><a href='#'>Six</a></li></ul></div>").navbar());
  }
});

Demo

Enhancement / manual initialization of Widget:

.navbar() is enhancement method of data-role="navbar" when it is injected dynamically. Static elements, e.g. Navbar, are auto-initialized when jQM framework is first initialized, or when they are retrieved via Ajax. However, when elements are dynamically injected, they need to be initialized manually, .navbar() is used for Navbar widget.

Upvotes: 1

Related Questions