AJAX script not working in Firefox

Question

I have written an AJAX script to read information from a database and inject it into a .php file as HTML. It works in IE8, Safari, Chrome but not Firefox. No errors displayed or anything, it just doesn't execute at all.

Here's the code:

function queryDatabase(query)
{
    alert();
    var xmlhttp;
    if (window.XMLHttpRequest)
     {
     alert();
     // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
     }
    else
     {
     alert();
     // code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
    xmlhttp.onreadystatechange=function()
     {
     if(xmlhttp.readyState==4)
      {
      content.innerHTML = xmlhttp.responseText;
      }
     else
      {
      content.innerHTML = "<center><span style=\"color: #ff7e00; font-size: 30px;\">LOADING...</div></center>";
      }
     }
     xmlhttp.open("GET",query,true);
     xmlhttp.send(null);
}

(The alerts were for testing purposes but none of them show up in Firefox)

Here's the divs it's used on:

<div onClick="queryDatabase('latestquery.php')" style="cursor: pointer;">TEST</div> <div onClick="queryDatabase('testtagquery.php')" style="cursor: pointer;">TEST</div>

Any help is appreciated :)
Thanks
Sam

Answer 1

Well for a start you can't do alert() in Firefox - the argument isn't optional. Change it to alert(0) and see what happens the.

Secondly, I don't see where you set content - is that a global variable you've got initialised somewhere?

You can check for script errors in Firefox by bringing up the Error Console (Tools -> Error Console or Ctrl + Shift + J). To help even more, install firebug.

Edit: if content is just the id of an element you need to do document.getElementById(content).innerHTML = ...;

Answer 2

The best advice I can give you is to start using a javascript framework that implements the AJAX functionality for you and makes it much easier to write code using it.

Using jQuery this would look like:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;
</script>
<script type="text/javascript">
 $(function() {
     $('#div1').click( function() {
         queryDb(this,'lastestquery.php');
     });

     $('#div2').click( function() {
         queryDb(this,'testtagquery.php');
     });
 });

 function queryDB(div,url) {
    $(div).load( url );
 }
</script>

<div id="div1" style="cursor: pointer;">TEST</div>
<div id="div2" style="cursor: pointer;">TEST</div>

Note that I would probably also use a CSS class to assign the cursor as well.

<div id="div1" class="clickable">TEST</div>

Loaded via a CSS file

.clickable {
    cursor: pointer;
}

Answer 3

Edit: This worked on the face of it, but it looks now like it was not the actual solution.

Taking your code above and moving the xmlhttp.open call to before you set the state change function worked for me. Like this:

xmlhttp.open("GET",query,true);
xmlhttp.onreadystatechange=function()
{
 if(xmlhttp.readyState==4)
 {
   content.innerHTML = xmlhttp.responseText;
 }
 else
 {
   content.innerHTML = "..";
 }
}
xmlhttp.send(null);

Answer 4

Here's the lastquery.php file if this helps:

<?php
      $con = mysql_connect("localhost","root","***");
      mysql_select_db("main", $con);

      //GET MOST RECENT POST ID
      $last_id_query = mysql_query("SELECT * FROM articles");
      $last_id_result = mysql_fetch_array($last_id_query);
      $last_id = (int)$last_id_result['id'] - 2;

      //USE MOST RECENT POST ID TO GENERATE LAST 5 ARTICLES SUBMITTED
      $result = mysql_query("SELECT * FROM articles WHERE id > '$last_id' ORDER BY id DESC");

      while($row = mysql_fetch_array($result))
        {
        echo "<div id=\"centralcontent\"><div class=\"articleheading\"><strong>".$row['title']."</strong></div><div class=\"tag\">&nbsp; &nbsp; in ".$row['tag']."</div><div class=\"articleinfo\">".$row['date']."</div>";
        echo "<div class=\"articlecontent\">".$row['content']."</div></div>";
        }

      mysql_close($con);
      ?>