...

View Full Version : Problems sorting list via AJAX



panther21001
12-06-2008, 09:36 AM
I cannot seem to get this sample list (created from a MySQL DB using PHP) to sort via AJAX request. I'm wanting to learn AJAX incorporating PHP but I can't get this simple alphabet list to work. Nothing happens when I click on my links. Here is the code:

index.php:


<?
include("lib.class.php");
$db_conn->connect_to_db("fadedele_ajaxDB");
?>
<html>
<head>
<title>Ajax</title>
<script type="text/javascript" src="global.js"></script>
</head>


<body>

Order By:
<span id="refreshListOrderAsc" style="color: 335599; cursor: pointer" onClick="orderListBy(ASC);">Ascending</span>
|
<span id="refreshListOrderDesc" style="color: ccaa66; cursor: pointer" onClick="orderListBy(DESC);">Descending</span>

<br /><br />

<div id="alphabetList">

<?

$alphabet = mysql_query("SELECT * FROM `alphabet` ORDER BY `id` ASC");

while ($row = mysql_fetch_array($alphabet)) {

$letter = $row['letters'];
$letterID = $row['id'];

?>

<span id="alphabetList"><? echo $letter ?></span><br />

<? } ?>

</div>

</body>
</html>
global.js:


// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();

// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)

alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}

// make asynchronous HTTP request using the XMLHttpRequest object
function orderListBy(orderByType)
{
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{

xmlHttp.open("GET", "list.php?orderBy=" + orderByType, true);
xmlHttp.send(null);

// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
}
}

// executed automatically when a message is received from the server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200)
{
document.getElementById("alphabetList").innerHTML = xmlHttp.responseText;
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}
list.php:


<?

include("lib.class.php");

$db_conn->connect_to_db("fadedele_ajaxDB");

$orderBy = $_GET['orderBy'];

$alphabet = mysql_query("SELECT * FROM `alphabet` ORDER BY `id` " . $orderBy);

while ($row = mysql_fetch_array($alphabet)) {

$letter = $row['letters'];
$letterID = $row['id'];

?>

<span id="alphabetList"><? echo $letter ?></span><br />

<? } ?>
I know that I am using the GET method correctly because i can go to "/list.php?orderBy=DESC" and it works fine.

Any help would be great! Thanks.

dumpfi
12-06-2008, 09:55 AM
Enclose the parameters to your orderListBy function within single quotation marks.

dumpfi

panther21001
12-06-2008, 10:27 AM
Haha, thanks dumpfi! I knew it had to be something small...

But now another issue arises: Instead of replacing the current list (innerHTML) it appends to the end of the list, removing the final two letters (Aa or Zz).

Can you please take a quick look at what I have uploaded?

http://www.fadedelement.com/ajax/

Thanks!

dumpfi
12-06-2008, 04:45 PM
You use the same id for your div as for your span elements. Give each element an unique id and the problem should go away.

dumpfi

panther21001
12-06-2008, 04:51 PM
Thanks again dumpfi. That was most certainly the problem! I'm glad you caught it, and taught me that I need to be more careful when I review my code next time.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum