Remplissage de div ok sous IE mais pas sous Firefox

[AllCoKe]

Salut,
J'utilise sur ma page le script suivant pour remplir 2 balises div différentes :

Code : Tout sélectionner

<script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}

function ShowFrame(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('page').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,false);
xhr.send(null);
}

function ShowAlbum(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('album').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax2.php?page="+page,false);
xhr.send(null);
}

function ShowPage(page)
{
	ShowFrame(page);
	ShowAlbum(page);
}
	
</script>

Et j'appelle mes 2 includes comme ça :

<div id="page"></div> <div id="album"></div>

Mon fichier ajax.php contient :

Code : Tout sélectionner

<?php
$page=$_GET['page'];
     if($page==2)require '2.html';
else if($page==3)require '3.html';
else if($page==4)require '4.html';
else if($page==5)require '5.html';
else require '1.html';
?>

Et ajax2.php :

Code : Tout sélectionner

<?php
$page=$_GET['page'];
     if($page==2)require 'album_2.html';
else if($page==3)require 'album_3.html';
else if($page==4)require 'album_4.html';
else if($page==5)require 'album_5.html';
else require 'album_1.html';
?>

Tout fonctionne parfaitement sous IE, les deux div sont bien remplis mais sous Firefox, rien ne s'affiche à ces deux endroits.
D'où vient le problème?

Merci d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

[Benoit]

Est-ce que tu peux d'une part vérifier dans la console si tu as des erreurs (menu Outils dans Firefox), et d'autre part donner l'adresse de ton site pour qu'on puisse faire le test en situation réelle ?

[AllCoKe]

Pas d'erreur dans la console.
Voilà l'adresse du site : http://www.graphisme4u.net/skikopat/
On m'a rapporté que ça ne fonctionnait pas sur Firefox Mac mais je n'en ai pas pour tester, et là ça semble fonctionner sur Firefox PC (depuis que j'ai installé Firebug, je comprends pas trop là)

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[Benoit]

Probablement un problème de timing alors. Si je comprends bien, tu utilises le même nom de variable pour deux objets XmlHttpRequest différents, et les deux requêtes sont consécutives voire presque simultanées.

Je pense que Firefox détruit le premier avant qu'il ait reçu la réponse et le remplace par le second, sauf quand Firebug est activé car l'extension ralentit suffisamment l'exécution des scripts pour que ça passe
Essaie en utilisant une variable xhr1 et une variable xhr2 par exemple.

Par ailleurs tu as le même problème qu'un autre site dont on a parlé récemment : il n'y a aucune solution de rechange si le script ne fonctionne pas. Tous ceux qui ont JavaScript désactivé, ainsi que les robots d'indexation des moteurs de recherche, ne verront rien de tes pages. Il suffirait pourtant de remplacer des liens comme

Code : Tout sélectionner

<a href="#" onClick="ShowPage(3)">

par

Code : Tout sélectionner

<a href="ajax.php?page=3" onclick="ShowPage(3); return false">

[AllCoKe]

Dans ce genre là?

Code : Tout sélectionner

<script type='text/JavaScript'>
var xhr1 = null; 
var xhr2 = null; 
function getXhr1()
{
     if (window.XMLHttpRequest) xhr1 = new XMLHttpRequest(); 
else if (window.ActiveXObject)
  { 
  try{
     xhr1 = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr1 = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr1 = false; 
  } 
}
function getXhr2()
{
     if (window.XMLHttpRequest) xhr2 = new XMLHttpRequest(); 
else if (window.ActiveXObject)
  { 
  try{
     xhr2 = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr2 = false; 
  } 
}

function ShowFrame(page)
{
getXhr1();
xhr1.onreadystatechange = function()
    {
     if (xhr1.readyState == 4 && xhr1.status == 200)
     {
     document.getElementById("page").innerHTML = xhr1.responseText;
     }
    }
xhr1.open("GET","ajax.php?page="+page,false);
xhr1.send(null);
}

function ShowAlbum(page)
{
getXhr2();
xhr2.onreadystatechange = function()
    {
     if (xhr2.readyState == 4 && xhr2.status == 200)
     {
     document.getElementById("album").innerHTML = xhr2.responseText;
     }
    }
xhr2.open("GET","ajax2.php?page="+page,false);
xhr2.send(null);
}

function ShowPage(page)
{
	ShowFrame(page);
	ShowAlbum(page);
}
</script>

Ben ça marche toujours pas si je désactive Firebug ^^

Et pour les liens, je vais modifier ça

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[AllCoKe]

Le problème pour le remplacement des liens, c'est que j'appelle ajax.php et ajax2.php dans mon script alors que

Code : Tout sélectionner

<a href="ajax.php?page=3" onclick="ShowPage(3); return false">

n'appelle que ajax.php

Et j'ai toujours pas trouvé de solution à mon problème de Firebug

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[Benoit]

En fait, vu que tu utilises de toute façon des appels synchrones, je crois que tu devrais simplement lancer la seconde requête quand la première est arrivée.

[AllCoKe]

En faisant comment? Désolé, je débute en AJAX
Et pour ce qui est des liens, je dois garder ce que j'avais mis ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[AllCoKe]

Si je fais ça :

Code : Tout sélectionner

<script type='text/JavaScript'> 
var xhr1 = null; 
var xhr2 = null; 
function getXhr1() 
{...} 

function getXhr2() 
{...} 

function ShowFrame(page) 
{ 
getXhr1(); 
xhr1.onreadystatechange = function() 
    { 
     if (xhr1.readyState == 4 && xhr1.status == 200) 
     { 
     document.getElementById("page").innerHTML = xhr1.responseText; 
     } 
    } 
xhr1.open("GET","ajax.php?page="+page,false); 
xhr1.send(null); 

getXhr2(); 
xhr2.onreadystatechange = function() 
    { 
     if (xhr2.readyState == 4 && xhr2.status == 200) 
     { 
     document.getElementById("album").innerHTML = xhr2.responseText; 
     } 
    } 
xhr2.open("GET","ajax2.php?page="+page,false); 
xhr2.send(null); 
} 
</script>

Ca devrait les exécuter l'une après l'autre mais ça ne fonctionne toujours pas sans Firebug

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[AllCoKe]

J'ai essayé de mettre uniquement une seule des 2 fonctions :

Code : Tout sélectionner

<script type='text/JavaScript'> 
var xhr = null; 
function getXhr() 
{ 
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject) 
  { 
  try{ 
     xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) 
     { 
     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
  } 
else 
  { 
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
} 

function ShowPage(page) 
{ 
getXhr() 
xhr.onreadystatechange = function() 
    { 
     if(xhr.readyState == 4 && xhr.status == 200) 
     { 
     document.getElementById('page').innerHTML=xhr.responseText; 
     } 
    } 
xhr.open("GET","ajax.php?page="+page,false); 
xhr.send(null); 
} 
</script>

Et j'ai placé des alert dedans pour voir où y'a un problème et c'est cette partie du code :

Code : Tout sélectionner

xhr.onreadystatechange = function() 
    { 
     if(xhr.readyState == 4 && xhr.status == 200) 
     { 
     document.getElementById('page').innerHTML=xhr.responseText; 
     } 
    } 

qui n'est pas interprétée par Firefox sans Firebug.
Y'a un blocage par xhr.onreadystatechange = function()

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)