Second Ajax Call not working

Jenny Dithe

09-28-2010, 07:03 AM

Hi,

I have webpage 1 which when a button is clicked calls up an ajax script, this ajax script also has a button that when clicked should call a second ajax script. The first part works fine, the second does not work at all.

I am slightly confused as to where I should have my second ajax function. Should I have it in the head of webpage 1 or in the head of the first ajax script called. I have tried both ways and neither works.

Here is the script:
Webpage 1:

<head>
<script type="text/javascript">
function loadXMLDoc(){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("show1").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("POST","getAjax1.php",true);
xmlhttp.send();
}

</script>
<script type="text/javascript">
function loadXMLDOC2(){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("show2").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("POST","getAjax2.php",true);
xmlhttp.send();
}

</script>
<head>
<body>

<?php
$con = mysql_connect("localhost","user","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);

$result = mysql_query("SELECT * FROM table1
WHERE title ='Mytitle' ORDER BY Date, Time DESC LIMIT 15");

echo "<table id='new' width='100%'>
<tr>";

while($row = mysql_fetch_array($result))
{
echo "<td><input type='button' class='button5' name='subject' value='" . $row[subject] . "' onclick='loadXMLDoc()'></td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>
<br />

<div id="show1"></div>
</body>
</html>

Here is the first ajax script/ getAjax1.php:

<head>
</head>
<body>
<div class="standard">
<?php
$con = mysql_connect("localhost","user","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);

$result = mysql_query("SELECT * FROM table1
WHERE title ='MyTitle' ORDER BY Date, Time DESC LIMIT 1");

echo "<table id='new' width='100%'>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<th colspan='2'>" . $row[subject] . "</th>";
echo "</tr><tr>";
echo "<td colspan='2'><br />" . $row[message] . "<br /></td>"; echo "</tr>";
}
echo "</table>";

mysql_close($con);

?>
<br />
<br />
<input type="button" class="button4" name="comment" value="Add a Comment" onclick="loadXMLDoc2()" />
<br />
<br />
<div id="show2">&nbsp</div>
<br />
<br />
</div>
</body>
</html>

I am also not sure if I can call this function anything I like or if it has to be a variant of loadXMLDoc?
Help would be great ... :)

tfburges

09-28-2010, 07:45 PM

First, you should make a more flexible AJAX function like so:
function loadXMLDoc(File, ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("POST",File,true);
xmlhttp.send();
}

Usage:
onclick="loadXMLDoc('getAjax1.php', 'show1');"

And as for the file(s) that you open with ajax, just treat them as if they are the HTML inside of the div you're assigning it to (hence, innerHTML)... i.e., you don't need <head>, <body>, etc. tags. So your file "getAjax1.php" would look something like this:
<div class="standard">
<?php
$con = mysql_connect("localhost","user","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);

$result = mysql_query("SELECT * FROM table1
WHERE title ='MyTitle' ORDER BY Date, Time DESC LIMIT 1");

echo "<table id='new' width='100%'>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<th colspan='2'>" . $row[subject] . "</th>";
echo "</tr><tr>";
echo "<td colspan='2'><br />" . $row[message] . "<br /></td>"; echo "</tr>";
}
echo "</table>";

mysql_close($con);

?>
<br />
<br />
<input type="button" class="button4" name="comment" value="Add a Comment" onclick="loadXMLDoc('getAjax2.php', 'show2');" />
<br />
<br />
<div id="show2">&nbsp</div>
<br />
<br />
</div>

(The <div class="standard"> portion of the code may be redundant but it depends on if you plan on having different classes for the div for different files.)

Jenny Dithe

09-29-2010, 05:23 AM

Thank you that helps a lot and I can see how that simplifies things, the only problem I am having is that it doesn't call the file and I get an error warning File is not Defined. I tried playing around with this and using variables, etc, but that didn't work.

I can see that it is almost there, but can't quite see the missing piece of the puzzle.

Jenny Dithe

09-30-2010, 02:29 PM

My mistake, a typo when copying. It works great. Thanks.