title: Load the current page via Ajax in php
body: <p>I have a problem on my ajax script and I need to load the page without refreshing the page. Base on this code.</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;div class="header-page" class="clearfix" role="banner"&gt;
          &lt;div class="container"&gt;
              &lt;img src="images/logo.png" /&gt;
          &lt;/div&gt;             
      &lt;/div&gt;
      &lt;!-- end of HEADER --&gt;
      &lt;form&gt;
      &lt;div id="contents"&gt;
      &lt;div class="main-container"&gt;
          &lt;div class="container"&gt;
              &lt;table id="tableID"&gt;
                  &lt;tr class="data-head"&gt;
                      &lt;td&gt;Name&lt;/td&gt;
                      &lt;td&gt;Phase&lt;/td&gt;
                      &lt;td&gt;Money 1&lt;/td&gt;
                      &lt;td&gt;Money 2&lt;/td&gt;
                      &lt;td&gt;Money 3&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;?php   
                  while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
                    $id = $row[0];
                    $companyname = $row[1];
                    $client = $row[2];
                    $package = $row[3];
                    $payment1 = $row[4];
                    $payment2 = $row[5];
                    $payment3 = $row[6];
  
  
                    echo '&lt;tr id="'.$id.'"&gt;';
                    echo '&lt;td&gt;&lt;b&gt;'.$client.'&lt;/b&gt;&lt;/td&gt;';
                    echo '&lt;td&gt;';
                    echo '&lt;select class="phase" onchange="trackPhases(this.value)"&gt;';        
                             if($phase_status=='Design'){
                              echo '&lt;option value="'.$phase_status.''.$id.'" selected&gt;'.$phase_status.'&lt;/option&gt;';
                              echo '&lt;option value="Build-Out'.$id.'"&gt;Build-Out&lt;/option&gt;';
                              echo '&lt;option value="Launch'.$id.'"&gt;Launch&lt;/option&gt;';
                             }
                             if($phase_status=='Build-Out'){
                              echo '&lt;option value="Design'.$id.'"&gt;Design&lt;/option&gt;';
                              echo '&lt;option value="'.$phase_status.''.$id.'" selected&gt;'.$phase_status.'&lt;/option&gt;';
                              echo '&lt;option value="Launch'.$id.'"&gt;Launch&lt;/option&gt;';
                             }
                             if($phase_status=='Launch'){
                              echo '&lt;option value="Design'.$id.'"&gt;Design&lt;/option&gt;';
                              echo '&lt;option value="Build-Out'.$id.'"&gt;Build-Out&lt;/option&gt;';
                              echo '&lt;option value="'.$phase_status.''.$id.'" selected&gt;'.$phase_status.'&lt;/option&gt;';
                             }
                    echo  '&lt;/select&gt;';
                    echo  '&lt;/td&gt;';
                    echo '&lt;/tr&gt;';
                  }
              ?&gt;  
              &lt;/table&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;div id="txtHint"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this is my Ajax script. I created a dropdown control(just a sample) on the html table code. When I select a value on the dropdown -- <code>select class="phase" onchange="trackPhases(this.value)</code>, it should automatically load the page via Ajax not a refresh.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function trackPhases(str)
      {
          if (str=="")
      {
          document.getElementById("txtHint").innerHTML="";
          return;
      } 
      if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
          }
      else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
              {
                  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
              }
          }
  
  
      xmlhttp.open("GET","update.php?q="+str,true);
      xmlhttp.send();
  
  }
  </code></pre>
  
  <p></p>
  
  <p>My index.php is fine though. But there is something wrong with my Ajax script. Please help me.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <pre><code>&lt;?php
    mysql_connect("localhost", "xx", "password");
    mysql_select_db('database');
  
    $query = "SELECT * FROM project";
    $result = mysql_query($query);
  
    ?&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p><img src="https://i.stack.imgur.com/U6Wot.png" alt="enter image description here"></p>
  
  <p><strong>EDIT</strong>
  update.php</p>
  
  <pre><code>&lt;?php
   mysql_connect("localhost", "xx", "password");
   mysql_select_db('database');
  
   $query = "SELECT * FROM project";
   $result = mysql_query($query);
  
   $q = $_GET['q'];
  
   $id = ereg_replace("[^0-9]", "",$q);
   $phase_status = preg_replace('/[0-9]+/', '', $q);
  
   $sql = 'UPDATE project SET phase_status="'.$phase_status.'" WHERE id = '.$id;
  
   $retval = mysql_query($sql);
   if(! $retval ){
    die('Could not update data: ' . mysql_error());
   }
  
   ?&gt;
  </code></pre>