Home/ Questions/Q 8118885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:37:58+00:00

I’m trying to get the persistent Jquery Mobile navbar footer working. I would like

  • 0

I’m trying to get the persistent Jquery Mobile navbar footer working. I would like it to be drawn dynamically with javascript (it’s for a PhoneGap application) rather than using PHP for templating the footer.

The following is adapted from:
http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH21.php

however, the jquery styling isn’t being applied to pages 2 and 3. It’s as if $(“#navbar”).navbar() isn’t being called for these pages or is being called too early.

Can anyone help me out with where I might be going wrong? Or point me to a code example which has a dynamic persistent navbar, preferably with active button persistence?

<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel=stylesheet href=jquery.mobile.css />
  <script src=lib/jquery.js></script>
  <script src=lib/jquery.mobile.js></script>
</head> 

<body> 

<div data-role=page id=page1>
  <div data-role=header>
    <h1>1</h1>
  </div>

  <div data-role=content>
   <p> Window content </p>
  </div>
</div>



<div data-role=page id=page2>
  <div data-role=header>
    <h1>2</h1>
  </div>

  <div data-role=content>
   <p> Window content </p>
  </div>
</div>


<div data-role=page id=page3>
  <div data-role=header>
    <h1>3</h1>
  </div>

  <div data-role=content>
   <p> Window content </p>
  </div>
</div>


</body>
</html>


<script>

var html = "";
html += "<div data-role=footer data-position=fixed>";
html +=   "<h1> Footer part </h1>";

html +=   "<div id=navbar>";
html +=     "<ul>";
html +=       "<li><a href=#page1 data-icon=refresh>Refresh</a></li>";
html +=       "<li><a href=#page2 data-icon=info>Help</a></li>";
html +=       "<li><a href=#page3 data-icon=delete>Close</a></li>";
html +=     "</ul>";
html +=   "</div>";
html += "</div>";




$("#page1").append (html);
$("#page2").append (html);
$("#page3").append (html);
$("#navbar").navbar();


</script>



<script>

$("li").bind ("click", function (event)
{

  alert ($(this).find ("a").text ());

});

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your code, navbar() looks very odd to me. Because i never seen these method in jquery mobile official documentation. And one more thing, you never mentioned the data-role="navbar" to the listview div element.

    You can dynamically append jquery navbar with noramal jquery .append() method.

    I will give you the sample code of dynamic navbar in jquery. It will solve your problem.

    $navbar="";
$navbar+="<div data-role='navbar'>";
$navbar+="<ul><li><a href='a.html' class='ui-btn-active ui-state-persist'>One</a></li>";
/*This class="ui-btn-active ui-state-persist" is to highlight the first tab*/
$navbar+="<ul><li><a href='b.html'>Two</a></li>";
$navbar+="<li><a href='c.html'>Three</a></li></ul></div>";
$("#page1").append ($navbar); /*First append to page 1 of the footer*/
$("#page1").trigger("pagecreate"); /*To refresh the page and load the dynamic append navbar*/

    Do the same process in the button click of page2 and page3 change the class='ui-btn-active ui-state-persist' repective pages.

    • 0