title: Jquery-UI Tabs / PHP / MySql - Not calling PHP POST after changing tabs
body: <p>I'm building a page that uses Jquery-UI tabs. Each tab calls a different php page.</p>
  
  <p>Each php tab page return in a  another php page on load with a php include() function. 
  In each of the php tab pages, there is some jquery at the top of the page to control the buttons the navigate through mysql records. When a button is pushed the Jquery posts to the same php script that is initially loaded on the tab. </p>
  
  <p>The script that is included originally and then posted to with the Jquery attached to the navigation buttons returns a form that hold a table from a mysql db. </p>
  
  <p>In operation, a user would click a tab and the form will be included on load. 
  The user can then scroll through values in the database with the left and right arrows. Each arrow press sends a Jquery post to the form and includes the same php script, but with the updated mysql values.</p>
  
  <p>So far this work, but the problem is when switching tabs. The tabs are only different in the sense that they contain a different form and mysql queries to different tables. 
  Other than that they operate the same. </p>
  
  <p>When a user presses a navigation button, the field containing the primary key value is sent in order to query the database for the next value. 
  The Jquery is using the name option on the form input to hold the primary key value.</p>
  
  <p>At first, I though there may be an issue where the page is not loaded so the Jquery passes the wrong value,  so I have tried to either name the form input name the same on each tab and also different  on each tab, but I get the same results both ways. </p>
  
  <p>What happens is that on page load, the mnavigation work fine when clicking on a tab. But when you click another tab, the navigation no longer works. </p>
  
  <p>After placing echo statements on the included database form script, I noticed that after you select a new tab, the navigation buttons no longer call the php database script with the navigation buttons. It seems to be stuck on the "on page load" version of the form.</p>
  
  <p>Long explanation, any ideas?</p>
  
  <pre><code>1. Index.html page (Jquery Tabs)
  
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;
        &lt;title&gt;Some Title&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.css" /&gt;
        &lt;link rel="stylesheet" href="css/mainstyle.css" /&gt;
        &lt;link rel="stylesheet" href="css/newstyle.css" /&gt;
        &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
        &lt;script src="js/jquery-ui-1.10.2.custom.js"&gt;&lt;/script&gt;
        &lt;script src="js/cookie.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
       $(function() {
      var index = 'key';
      var dataStore = window.sessionStorage;
  
      try {
          var oldIndex = dataStore.getItem(index);
      } catch(e) {
          var oldIndex = 0;
      }
      $('#tabs').tabs({
          active : oldIndex,
          activate : function( event, ui ){
              var newIndex = ui.newTab.parent().children().index(ui.newTab);
              dataStore.setItem( index, newIndex ) 
          }
      }); 
      }); 
        &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
       &lt;div id="top"&gt;&lt;img id="headimg" src="css/images/header.gif" alt="heading"/&gt;&lt;/div&gt;
  
      &lt;div id="middle"&gt;
              &lt;div id="tabs"&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#tabs-1" class="button"&gt;Site Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="php/page1.php" class="button"&gt;First Tab&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="php/page2.php" class="button"&gt;Second Tab&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="php/page3.php" class="button"&gt;Third Tab&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="php/page4.php" class="button"&gt;Forth Tab&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="php/page5.php" class="button"&gt;Fifth Tab&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;div id="tabs-1" class="content"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer" class="smaller"&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  
  2. page1.php
  
  
  
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;
      &lt;link rel="stylesheet" href="css/newstyle.css" /&gt;
      &lt;script src="js/jquery-ui-1.10.2.custom.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;script&gt;
      $(document).ready(function() {
  
      $(".prev span").live("click",function(){
          var id = $('input[name="contactid"]').val();
          $.post("php/aec_database.php",
          {pn:id},function(data){$("#dbform").html(data);});});
  
      $(".next span").live("click",function(){
          var id = $('input[name="contactid"]').val();
          $.post("php/aec_database.php",
          {nn:id},function(data){$("#dbform").html(data);});});
  
      $(".first span").live("click",function(){
          var id = $('input[name="contactid"]').val();
          $.post("php/aec_database.php",
          {fn:id},function(data){$("#dbform").html(data);});});
  
      $(".last span").live("click",function(){
          var id = $('input[name="contactid"]').val();
          $.post("php/aec_database.php",
          {ln:id},function(data){$("#dbform").html(data);});});
      });
  
      &lt;/script&gt;
  
      &lt;body&gt;
      &lt;div id="alerts_main" class="content"&gt;
          &lt;div id="dbform"&gt;
          Original
          &lt;?php include 'aec_database.php'; ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  
  3. aec_database.php
  
  
      &lt;?php
      include("conf.php");
  
      if(isset($_POST['pn'])){$prev = $_POST["pn"];}
      if(isset($_POST['nn'])){$next = $_POST["nn"];}
      if(isset($_POST['ln'])){$last = $_POST["ln"];}
      if(isset($_POST['fn'])){$first = $_POST["fn"];}
  
  
  
      $firstvalue = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID ASC LIMIT 1");
      while($row = mysqli_fetch_array($firstvalue))
        {
            $fvalue = $row['System_ID'];
        }
      $lastvalue = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID DESC LIMIT 1");
      while($row = mysqli_fetch_array($lastvalue))
        {
            $lvalue = $row['System_ID'];
        }
  
      if ($prev == $fvalue){
          $result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$prev'");
      }
      elseif($next == $lvalue){
          $result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$next'");
      }
      elseif(isset($prev)){
          $result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID &lt; '$prev' ORDER by System_ID DESC LIMIT 1");
      }
      elseif(isset($next)){
          $result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID &gt; '$next' ORDER by System_ID ASC LIMIT 1");
      }
      elseif(isset($first)){
          $result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$fvalue'");
      }
      elseif(isset($last)){
          $result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$lvalue'");
      }
      else{   
          $result = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID ASC LIMIT 1");
      }
  
      while($row = mysqli_fetch_array($result))
        {
            $si = $row['System_ID'];
            $ai = $row['Additional_Information']; 
        }
          echo "
          &lt;form&gt;
  
      &lt;div id='sites_sec2' class='sites_sec_class'&gt;   
          &lt;div id='a2' class='sites_sub_sec_class'&gt;
          &lt;div class='field'&gt;
          &lt;label for='contactid'&gt;System ID:&lt;/label&gt;
      &lt;div class='field-subject'&gt;&lt;input type='text' name='contactid' value='".$si."' /&gt;&lt;/div&gt;
      &lt;/div&gt;
              &lt;div class='field'&gt;
                  &lt;label for='ai'&gt;Add Info:&lt;/label&gt;
                  &lt;div class='field-subject'&gt;&lt;input type='text' name='ai' value='".$ai."' /&gt;&lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
  
  
      &lt;/div&gt;  
          &lt;div id='hrsep'&gt;&lt;hr&gt;&lt;/div&gt;
              &lt;div id='buttons'&gt;
              &lt;div class='first'&gt;&lt;span&gt;&lt;a href='#'&gt;&lt;img src='css/images/icons/leftend.png' /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class='prev'&gt;&lt;span&gt;&lt;a href='#'&gt;&lt;img src='css/images/icons/leftarrow.png' /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class='next'&gt;&lt;span&gt;&lt;a href='#'&gt;&lt;img src='css/images/icons/rightarrow.png' /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class='last'&gt;&lt;span&gt;&lt;a href='#'&gt;&lt;img src='css/images/icons/rightend.png' /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;";
       ?&gt;
  
  
  
  
  4. conf file
  
  
      &lt;?php
      global $mysqli;
      //server info
      //server info
      $server = 'localhost';
      $user = 'xx';
      $pass = 'xx';
      $db = 'xx';
  
  
  
      //connect to db
      $con = mysqli_connect($server, $user, $pass, $db);
      //mysqli_query('SET NAMES UTF8;');
      //mysqli_query('SET COLLATION_CONNECTION=utf8_general_ci;');
      //mysqli_client_encoding($con);// where $conn is your connection
      if(mysqli_connect_errno()){
          printf("Connect failed: %s\n", mysqli_connect_error());
      } 
      //show errors
      mysqli_report(MYSQLI_REPORT_ERROR);
  ?&gt;
  </code></pre>