Multipage document doesn't work. What am I missing?

Multipage document doesn't work. What am I missing?

Im about to pull the hair out of my head on this! I've stared at it now for hours and maybe I'm missing something simple here... it usually is...

The 3 buttons on the first page, although linked correctly to each page (in my mind), will not work. 

I could really use another set of eyes to help me see what I'm missing or incorrectly coded.

Any help would be MUCH appreciated.

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.         <title>
  8.         </title>
  9.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  10.         <link rel="stylesheet" href="myUI.css" type="text/css" />
  11.        
  12.         <script src="http://code.jquery.com/jquery-1.8.2.min.js">
  13.         </script>
  14.         <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
  15.         </script>
  16.         <script src="my.js">
  17.         </script>
  18.     </head>
  19.     <body>
  20. <!-- Home -->
  21.         <div data-role="page" id="page1" data-theme="a">
  22.             
  23.             <div id="Head" data-theme="a" data-role="header">
  24.                 <a data-role="button" data-rel="back" data-theme="d" href="#page1" class="ui-btn-left">
  25.                     Back
  26.                 </a>
  27.                 <h3>
  28.                    <span style="color:#F90"> Leave Request </span>
  29.                 </h3>
  30.             </div>
  31.             
  32.             
  33.             <div data-role="content">
  34.                 <div>
  35.                     <p style="text-align: center;" data-mce-style="text-align: center;">
  36.                         <b>John Smith - 0076449</b>
  37.                     </p>
  38.                     <p style="text-align: center;" data-mce-style="text-align: center;">
  39.                         <img src="http://lottmandesign.com/images/palm-tree.png" width="30" height="46" alt="Palm Tree" title="Vacation" style="vertical-align: baseline;"
  40. data-mce-src="http://lottmandesign.com/images/palm-tree.png" data-mce-style="vertical-align: baseline;" />
  41.                         <b>Vacation</b>
  42.                     </p>
  43.                     <address data-mce-style="text-align: center;" style="text-align: center;">
  44.                         <span style="font-size: small;" data-mce-style="font-size: x-small;">
  45.                             From:&nbsp;Weds, May 23rd 2012
  46.                         </span>
  47.                         <br />
  48.                     </address>
  49.                     <address data-mce-style="text-align: center;" style="text-align: center;">
  50.                         <span style="font-size: small;" data-mce-style="font-size: x-small;">
  51.                             To: Fri, May 25th 2012
  52.                         </span>
  53.                     </address>
  54.                 </div>
  55.                 <div id="Notes" data-role="collapsible-set" data-theme="c" data-content-theme="c">
  56.                     <div data-role="collapsible" data-collapsed="true">
  57.                         <h3>Basic </h3>
  58.                         <div>
  59.                             <p>
  60.                                 <b>Supervisor: Rick Ashley&nbsp;</b>
  61.                                 <b>0052658</b>
  62.                             </p>
  63.                             <p>
  64.                                 <b>Created By: &nbsp;John Smith 0076449</b>
  65.                             </p>
  66.                             <p>
  67.                                 <b>Created Date: 01/02/2013</b>
  68.                             </p>
  69.                             <p>
  70.                                 <b>Created Time: 12:30pm</b>
  71.                             </p>
  72.                         </div>
  73.                    </div>
  74.                     <div data-role="collapsible" data-collapsed="true">
  75.                         <h3>Details</h3>
  76.                         <div>
  77.                             <p>
  78.                                 <b>Hours: 24</b>
  79.                             </p>
  80.                             <p>
  81.                                 <b>Begin Time: 8:00am</b>
  82.                             </p>
  83.                             <p>
  84.                                 <b>End Time: &nbsp; &nbsp;4:00pm</b>
  85.                             </p>
  86.                             <p>
  87.                                 <b>Begin Meal: 12:00pm</b>
  88.                             </p>
  89.                             <p>
  90.                                 <b>End Meal: &nbsp; &nbsp; &nbsp; 1:00pm</b>
  91.                             </p>
  92.                         </div>
  93.                         <div>
  94.                             <p>
  95.                             </p>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99. <div class="ui-grid-b">
  100.     <div class="ui-block-a"><a href="#History" data-theme="e" data-role="button"><font size="2">History</font></a></div>
  101.     <div class="ui-block-b"><a href="#Quotas" data-theme="e" data-role="button"><font size="2">Quota</font></a></div>
  102.     <div class="ui-block-c"><a href="#Notes" data-theme="e" data-role="button"><font size="2">Notes</font></a></div>
  103. </div><!-- /grid-b -->

  105.             <div id="Footer" data-theme="a" data-role="footer" data-position="fixed">
  106.             
  107.                 <h3>
  108.                 </h3>
  109.                 <a data-role="button" data-theme="c" href="#page1" class="ui-btn-left">
  110.                     Approve
  111.                 </a>
  112.                 <a id="Reject" data-role="button" data-theme="a" href="#page1" class="ui-btn-right">
  113.                     &nbsp; Reject &nbsp;
  114.                 </a>
  115.             </div>
  116.         </div>
  117.         
  118.         
  119.         
  120.         
  121.         
  122.         
  123.  <!-- History -->
  124.         <div data-role="page" id="History">
  125.             <div id="Header" data-theme="a" data-role="header">
  126.                 <h3>
  127.                     History
  128.                 </h3>
  129.             </div>
  130.             <div data-role="content">
  131.                 <div>
  132.                     <p>
  133.                         <span style="color: rgb(255, 153, 0);" data-mce-style="color: #ff9900;">
  134.                             will go here
  135.                         </span>
  136.                     </p>
  137.                 </div>
  138.             </div>
  139.         </div>

  141.  <!-- Quotas -->
  142.         <div data-role="page" id="Quotas">
  143.             <div id="Header" data-theme="a" data-role="header">
  144.                 <h3>
  145.                     Quotas
  146.                 </h3>
  147.             </div>
  148.             <div data-role="content">
  149.             </div>
  150.         </div>

  152.         <!-- Notes -->
  153.         <div data-role="page" id="Notes">
  154.             <div id="Notes" data-theme="a" data-role="header">
  155.                 <h3>
  156.                     Notes
  157.                 </h3>
  158.                 <a id="Back" data-role="button" data-rel="back" href="#page1" class="ui-btn-left">
  159.                     Back
  160.                 </a>
  161.             </div>
  162.             <div data-role="content">
  163.                 <div>
  164.                     <p>
  165.                         <strong>Med. Appt Time: 1:00pm</strong>
  166.                     </p>
  167.                     <p>
  168.                         <strong>Family Rel: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Aunt</strong>
  169.                     </p>
  170.                     <p>
  171.                         <strong>Influenza: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; None</strong>
  172.                     </p>
  173.                 </div>
  174.                 <div id="Med Cert" data-role="fieldcontain">
  175.                     <fieldset data-role="controlgroup" data-type="vertical">
  176.                         <legend>
  177.                         </legend>
  178.                         <input id="checkbox1" name="Medical Cert" type="checkbox" />
  179.                         <label for="checkbox1">
  180.                             Med. Cert. Available
  181.                         </label>
  182.                     </fieldset>
  183.                 </div>
  184.                 <div data-role="fieldcontain">
  185.                     <fieldset data-role="controlgroup">
  186.                         <label for="Remarks">
  187.                             Remarks:
  188.                         </label>
  189.                         <textarea name="Remarks" id="Remarks" placeholder="">
  190.                             I need to take some vacation time for a medical appointment for my Auntie Jane. She does not have influenza.
  191.                         </textarea>
  192.                     </fieldset>
  193.                 </div>
  194.             </div>
  195.         </div>
  196.           
  197.     </body>
  198. </html>