Pop Up in navbar and tabbed content

Pop Up in navbar and tabbed content

Hello all!

I am creating a navbar that will be used as tabs.  All is working well with the tabs.   I would like for the last link in the navbar to open a popup with a list.  The popup doesn't come up when it is in the li tag of the navbar.  When I remove the li tag from the popup menu item it works just fine.  Also it will work if I remove the data-role="tabs" from the outer div.  The pop up content is located inside of a data-role = "page" which is something I noted from the docs that is required.  Not sure what I am doing wrong.  Hopefully it is something simple : )  Any help will be greatly appreciated!

Here is a code snippet so that you can see what I am attempting to do: JQM Version 1.4.2

  2. <div data-role="tabs" class="tab-content">
  3.   <div data-role="navbar">
  4.     <ul>
  5.       <li class="ui-corner-all"><a href="#oned" class="firsttab2" data-ajax="false" onclick="ShowHide(#oned)"  data-icon="user">First Tab</a></li>
  6.       <li class="ui-corner-all"><a href="#twod" data-ajax="false"  onclick="ShowHide(#twod)"  data-icon="grid">Second Tab</a></li>
  7.       <li class="ui-corner-all"><a href="#threed" data-ajax="false"  onclick="ShowHide(#threed)" data-icon="comment">Third Tab</a></li>
  8.  <li class="ui-corner-all"><a href="#popupMenu" data-rel="popup" data-transition="slideup" data-icon="gear">Actions...</a></li> 
  9.  
  10. </ul> 
  11.   </div><!--- end navbar --->
  12.          
  13. <!--- tabbed content --->
  14.     <div id="oned">
  15.       <p>Panel One</p>
  16.    </div>
  17.    
  18.      <div id="twod">
  19.        <p>Panel Two</p>
  20.     </div>
  21.   
  22.       <div id="threed">
  23.        <p>Panel Three</p>
  24.   </div>
  25.  
  26.  </div><!--- close tabbed-content --->

  28.  <div data-role="popup" id="popupMenu" data-theme="b">
  29.         <ul data-role="listview" data-inset="true">
  30.             <li data-role="list-divider">Choose an action for this Person</li>
  31.             <li><a href="#">Cancel</a></li>
  32.             <li><a href="#">Reschedule</a></li>           
  33.             <li><a href="#">Deactivate</a></li>
  34.         </ul>
  35.     </div>