JQM 1.4.3 tabs not working as expected

JQM 1.4.3 tabs not working as expected

To whom it may concern,

I'm currently testing JQM 1.4.3's tab feature and I've ran into a few issues so I wanted to see if there's a fix for this or if it's just me doing something wrong.

My first issue is that I want to have the first tab button highlighted on load but when I click between the other tab buttons, the first button remains highlighted until it's clicked again. What I'm doing is just programmatically clicking the button on load. Not sure if this is the best solution but I don't know any other way.

I have a JS bin example at:  link

Another issue is that the tab doesn't render properly when the HTML code is in another HTML and the first page changes to the page that has the tab HTML code. I guess the easiest way to explain this is with an example.

I have two HTML files both at the root.

e.g.

index.html
main.html

Basically, the index page is a login page and there's a button that changes page to the main. Self explanatory I guess.

index.html
  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
  4.     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  5.     <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
  6.   </head>
  7.   <body>

  9.     <div data-role="page" class="firstPage">
  10.           <a data-role="button" class="loginBTN">LOGIN</a>

  11.           <script>
  12.             $(document).on("pagecreate", ". firstPage", function(){
  13.               $(". loginBTN").on("click", login);

  15.               function login(){
  16.                   $(":mobile-pagecontainer").pagecontainer("change", "main.html");
  17.               }//login
  18.             });
  19.           </script>
  20.     
  21.     </div><!-- firstPage -->
  22.     
  23.   </body>
  24. </html>

main.html
  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
  4.     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  5.     <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
  6.     
  7.     <style>
  8.       .tablist-left {
  9.           width: 20%;
  10.           display: inline-block;
  11.       }
  12.       .tablist-content {
  13.           width: 70%;
  14.           margin-left: 5%;
  15.           display: inline-block;
  16.           vertical-align: top;
  17.       }
  18.       </style>
  19.   </head>
  20.   <body>

  22.     <div data-role="page" class="secondPage">
  23.       <div data-role="tabs">
  24.           <ul data-role="listview" data-inset="true" class="tabClassNav tablist-left">
  25.               <li><a href="#tab1">1</a></li>
  26.               <li><a href="#tab2">2</a></li>
  27.               <li><a href="#tab3">3</a></li>
  28.           </ul>
  29.           <div id="tab1" class="tablist-content">
  30.               <h1>First tab contents</h1>
  31.           </div><!-- tab1 -->
  32.           <div id="tab2" class="tablist-content">
  33.               <h1>Second tab contents</h1>
  34.           </div><!-- tab2 -->
  35.           <div id="tab3" class="tablist-content">
  36.               <h1>Third tab contents</h1>
  37.           </div><!-- tab3 -->
  38.       </div><!-- tabs -->
  39.       
  40.       <script>
  41.            $(document).on("pagecreate", ".secondPage", function(){
  42.                  $(".tabClassNav li:first-child").find("a").click();
  43.            });
  44.      </script>
  45.     
  46.     </div><!-- secondPage -->
  47.     
  48.   </body>
  49. </html>

The result of the tab after logging in looks like this:



Note that the screenshot is actually the full screen and that the padding on the right is actually how it looks on the screen. I'm using Chrome to view this on a Mac (not sure if this makes a different or not though).

As you can see, the tab contents that's suppose to be hidden is not and the first tab is not where it's suppose to be. This only happens when the tab HTML is within another HTML page and is later loaded. If tab HTML code is within the same HTML file, and is later changed using the page identifier, everything seems to work. Not sure what this means but I can only guess that either the way I change between pages or the second page doesn't load correctly. Either way, it doesn't work for me but I'm not sure if this can be duplicated for someone else. 

Can someone please help me with this issue or at least explain why this is happening?

Please and thank you.