Resolved Slight issues with my Ajax call

[LearningCoder]

Hi, I have an Ajax script which I have modified to suit my needs...nearly.

I have 2 links:

<a href="#" name="ASC" onmouseup="showUser('ASC')">ASC</a>|
<a href="#" name="DESC" onmouseup="showUser('DESC')">DESC</a>

as you can see when they are clicked they go into this ajax function:

<script type="text/javascript">
   function showUser(order)
 {
 if (order=="")
   {
   document.getElementById("content").innerHTML=xmlhttp.responseText;
   } 
 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("content").innerHTML = xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","sort.php?q="+order,true);
 xmlhttp.send();
 }
 </script>

This goes into my db when it is called and re-arranges the list by what they choose, either ascending or descending. If the function hasn't run, it displays the list by member number (this is set in my sort.php).

Here is my sort.php:

PHP Code:

<?php
require("connectdb.php");

if(empty($_GET['q'])){

  $sql = mysql_query("SELECT * FROM members");
  
  echo "<table id='members_table' name='members_table'>
        <tr>
           <th>Member No.</th>
           <th>Username</th>
           <th>Join Date</th> 
        </tr>";

  while($row = mysql_fetch_array($sql)){
    echo "<tr>";
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['username'] . "</td>";
    echo "<td>" . $row['join_date'] . "</td>";
    echo "</tr>";
  }
  echo "</table>";

  
}
else{
   $q = $_GET['q'];
   $sql= mysql_query("SELECT * FROM members ORDER BY username {$q}");

   echo "<table id='members_table' name='members_table'>
         <tr>
            <th>Member No.</th>
            <th>Username</th>
            <th>Join Date</th> 
         </tr>";

   while($row = mysql_fetch_array($sql)){
      echo "<tr>";
      echo "<td>" . $row['id'] . "</td>";
      echo "<td>" . $row['username'] . "</td>";
      echo "<td>" . $row['join_date'] . "</td>";
      echo "</tr>";
   }
   echo "</table>";
}

mysql_close($con);
?>

Problem is, when I click on either the ASC or DESC links, they go into the correct order, but both of the links disappear.

Can anyone help me to fix this problem please!?

Thanks you in advance.

Regards,

LC.

[xelawho]

you wouldn't happen to have your links inside your "content" div by any chance...?

[LearningCoder]

I do indeed.

I thought it was something to do with the innerHTML statement, so I tried doing:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("content").innerHTML += xmlhttp.responseText;
     }

by adding the + to the = sign, I presumed it would append to the content div. But it re-writes another table if I click the ASC or DESC links. This happens because everytime the ajax is called, my php file writes a new table each time so obviously what I did was wrong. I've got the functionality, if I click ASC it orders them alphabetically and if I click DESC, it reverses the data results, the only issue is with the links disappearing.

If I can sort that out I've pretty much solved my problem.

How can I fix this?

Regards,

LC.

[xelawho]

take your links out of your content div?

[LearningCoder]

Ah thank you.

I placed the table in it's own separate div and then wrote the innerHTML to that element.

Kind Regards,

LC.

[LearningCoder]

Is there anyway to append to a table? I have created my table and table headers in HTML:

<table id="members_table">
	  <tr>
	      <th>Member No.</th>
	      <th><a href="#" onmouseup="showUser('ASC','username')">Username</a></th>
	      <th><a href="#" onmouseup="showUser('ASC','join_date')">Join Date</th>
	  </tr>

In my php script, I echo each database row into its own table row.

Everytime I click my links, the table headers disappear and it's something to do with writing the innerHTML to the same parent element. How can I fix this problem? I've changed my code many times and haven't found a solution yet.

Regards,

LC.