Le script AJAX ne fonctionne pas dans Firefox

Question

J'ai écrit un script AJAX pour lire les informations d'une base de données et l'injecter dans un fichier .php au format HTML. Cela fonctionne dans IE8, Safari, Chrome mais pas Firefox. Aucune erreur affichée ou quoi que ce soit, cela ne fonctionne tout simplement pas.

Voici le 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); 
} 

(Les alertes sont à des fins de test, mais aucun d'entre eux apparaissent dans Firefox)

Voici les divs il est utilisé sur:

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

Tous l'aide est appréciée :)
Merci
Sam

Answer 1

Eh bien pour commencer, vous ne pouvez pas faire alert() dans Firefox - l'argument n'est pas facultatif. Changez-le en alert(0) et voyez ce qu'il se passe. Deuxièmement, je ne vois pas où vous définissez content - est-ce une variable globale que vous avez initialisée quelque part?

Vous pouvez vérifier les erreurs de script dans Firefox en affichant la console d'erreur (Outils -> Console d'erreur ou Ctrl + Maj + J). Pour vous aider encore plus, installez firebug.

Edit: si content est juste l'identifiant d'un élément que vous devez faire document.getElementById(content).innerHTML = ...;

Answer 2

Le meilleur conseil que je peux vous donner est de commencer à utiliser un framework javascript qui implémente la fonctionnalité AJAX pour vous et rend beaucoup plus facile écrire du code en l'utilisant.

En utilisant jQuery cela ressemblerait à ceci:

<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> 
</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> 

Notez que j'utiliserais probablement aussi une classe CSS pour attribuer le curseur aussi bien.

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

via un fichier Loaded CSS

.clickable { 
    cursor: pointer; 
} 

Answer 3

Edition: Cela a fonctionné sur le visage de celui-ci, mais maintenant il semble que ce n'était pas la solution réelle. Prendre votre code ci-dessus et déplacer l'appel de xmlhttp.open avant de définir la fonction de changement d'état a travaillé pour moi. Comme ceci:

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

Answer 4

Voici le fichier lastquery.php si cela aide:

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