Load the current page via Ajax in php

Question

I have a problem on my ajax script and I need to load the page without refreshing the page. Base on this code.

index.php

<div class="header-page" class="clearfix" role="banner">
        <div class="container">
            <img src="images/logo.png" />
        </div>             
    </div>
    <!-- end of HEADER -->
    <form>
    <div id="contents">
    <div class="main-container">
        <div class="container">
            <table id="tableID">
                <tr class="data-head">
                    <td>Name</td>
                    <td>Phase</td>
                    <td>Money 1</td>
                    <td>Money 2</td>
                    <td>Money 3</td>
                </tr>
            <?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 '<tr id="'.$id.'">';
                  echo '<td><b>'.$client.'</b></td>';
                  echo '<td>';
                  echo '<select class="phase" onchange="trackPhases(this.value)">';        
                           if($phase_status=='Design'){
                            echo '<option value="'.$phase_status.''.$id.'" selected>'.$phase_status.'</option>';
                            echo '<option value="Build-Out'.$id.'">Build-Out</option>';
                            echo '<option value="Launch'.$id.'">Launch</option>';
                           }
                           if($phase_status=='Build-Out'){
                            echo '<option value="Design'.$id.'">Design</option>';
                            echo '<option value="'.$phase_status.''.$id.'" selected>'.$phase_status.'</option>';
                            echo '<option value="Launch'.$id.'">Launch</option>';
                           }
                           if($phase_status=='Launch'){
                            echo '<option value="Design'.$id.'">Design</option>';
                            echo '<option value="Build-Out'.$id.'">Build-Out</option>';
                            echo '<option value="'.$phase_status.''.$id.'" selected>'.$phase_status.'</option>';
                           }
                  echo  '</select>';
                  echo  '</td>';
                  echo '</tr>';
                }
            ?>  
            </table>

        </div>
    </div>
    </div>
    </form>
    <div id="txtHint"></div>

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 -- select class="phase" onchange="trackPhases(this.value) , it should automatically load the page via Ajax not a refresh.

<script type="text/javascript">
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 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }


    xmlhttp.open("GET","update.php?q="+str,true);
    xmlhttp.send();

}

My index.php is fine though. But there is something wrong with my Ajax script. Please help me.

EDIT:

<?php
  mysql_connect("localhost", "xx", "password");
  mysql_select_db('database');

  $query = "SELECT * FROM project";
  $result = mysql_query($query);

  ?>

EDIT

EDIT update.php

<?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());
 }

 ?>

Answer 1

I say it only to notice .

* Please use PDO or mysqli *

my using of mysql_query() is only to fit your code

---

If the code of update.php you give us is like we can see .

You can not get a response that you can replace, when you send no output !

index.php

<script type="text/javascript">
function trackPhases(str)
{
....
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
  }
....

xmlhttp.open("GET","update.php?q="+str,true);
xmlhttp.send();

update.php

.... 
$sql = 'UPDATE project SET phase_status="'.$phase_status.'" WHERE id = '.$id;

 $retval = mysql_query($sql);
 if(! $retval ){
  die('Could not update data: ' . mysql_error());
 }

The only output you will get is when there is an error :

output :

'Could not update data: ' . mysql_error());

and immediately terminate your script ..

So your question Load the current page via Ajax in php has nothing to do with what you want to get .

you want to replace the whole

<table id="tableID">
....
<?php   
  while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
....
</table>

with the new content from your table: project .

---

Only a Tip :

You can put above

<table id="tableID">
....
<?php   
  while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
....
</table>

code in a extra include setSelect.php with a function

<?php 
function getSelect($result) {
?>
   <table id="tableID">
   ....
<?php   
   while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
?>
   </table> 
}

in index.php your code becomes

<?php
include "setSelect.php";
....
?>
<div class="main-container">
    <div id="newCont" class="container">
       <?php  getSelect($result); ?>
    </div>
</div>

....
?>

update.php

<?php
include "setSelect.php";
 .... 
 $sql = 'UPDATE project SET phase_status="'.$phase_status.'" WHERE id = '.$id;

 $retval = mysql_query($sql);
 if(! $retval ){
  die('Could not update data: ' . mysql_error());
 }
 $query = "SELECT * FROM project";
 $result = mysql_query($query);
 if ($result) {
  getSelect($result);
 }
?>

Now you have to change your getElementById() to

document.getElementById("newCont").innerHTML=xmlhttp.responseText;

to match the new created container id .

I'm shure you know what i mean.