[AJAX] Script AJAX pour remplir deux "div"

**AllCoKe** · 14/02/2007, 09h28

Bonjour,
J'utilise sur ma page le script suivant pour remplir 2 "div" différents :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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,true);
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,true);
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>
(ils ne sont pas placés au même endroit de la page, d'où mon besoin d'avoir deux fonctions ShowFrame(page) et ShowAlbum(page).

Mon fichier ajax.php contient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?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';
?>

Voilà le problème :
Quand je charge la page, je vois "album" aux deux endroits au lieu de "page" et "album". Quand je recharge la page, je vois bien comme je veux "page" et "album", quand je charge une autre page, je vois 2 "albums". Assez aléatoire en faite.

Je pense que ça vient du script que j'ai posté plus haut mais je n'ai pas assez de connaissances pour trouver le problème.

Merci de m'aider !

**E.Bzz** · 14/02/2007, 10h50

Bonjour,
tu utilises le même objet, et tu fais tes appels en asynchrones. Le pb vient peut-être de la (tu ne controles pas si la 1° réponse correspond bien au 1° appel).
Essaye en synchrone

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.open("GET","ajax.php?page="+page,false);

EDIT : dans tes 2 fonctions ....

A+

**AllCoKe** · 14/02/2007, 11h04

Ca venait bien de ça !
Merci beaucoup

**AllCoKe** · 15/02/2007, 00h28

En faite ça marche parfaitement bien sous IE mais pas du tout sous Firefox où rien ne s'affiche du tout à la place des deux div

**AllCoKe** · 16/02/2007, 11h57

Pas d'idée ?

**E.Bzz** · 16/02/2007, 12h07

Rien de flagrant.
Ajoute les espaces entre if et ( et entre ) et xhr :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if(window.XMLHttpRequest)xhr = new XMLHttpRequest();

et partout où c'est pareil

Mets tous les ";" en fin d'instruction, comme ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function ShowFrame(page)
{
getXhr();
xhr.onreadystatechange = function()

et dans la fonction suivante ...
Aucune garantie de résultat ...

A+

**E.Bzz** · 16/02/2007, 12h08

Sinon, l'erreur peut venir du code généré par PHP ...

A+

**AllCoKe** · 16/02/2007, 12h11

Non ça change rien.
Et si ça vient du code généré par PHP, je fais comment ?

**E.Bzz** · 16/02/2007, 12h20

Ben, donne nous le résultat, pris dans ton nav (code source) ...

A+

**AllCoKe** · 16/02/2007, 12h23

Le voilà

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
 
body
{
background-color:#000000;
color:#FFFFFF;
font-family:Calibri;
}
 
div.centre
{
position:absolute;
left:50%;
top:50%;
width:778px;
height:600px;
margin-left:-389px;
margin-top:-300px;
background-color:#000000;
}
 
-->
</style>
<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>
</head>
<body bgcolor="#000000" onLoad="ShowPage(1)">
<div class="centre"><table width="778" border="3" align="center" cellpadding="0" cellspacing="0" id="Tableau_02" style="border-style: solid;">
<tr><td>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_02">
	<tr>
 
		<td colspan="7" background="images/image_01.gif" width="778" height="261">&nbsp;</td>
	</tr>
	<tr>
		<td><a href="#" onClick="ShowPage(2);ShowAlbum(2)"><img src="images/image_02.gif" border="0" onmouseover="this.src='images/image_02_bis.gif';" onmouseout="this.src='images/image_02.gif';" alt="we" /></a></td>
		<td>
			<a href="#" onClick="ShowPage(3)"><img src="images/image_03.gif" border="0" onmouseover="this.src='images/image_03_bis.gif';" onmouseout="this.src='images/image_03.gif';" alt="we" /></a></td>
		<td>
			<a href="#" onClick="ShowPage(4)"><img src="images/image_04.gif" border="0" onmouseover="this.src='images/image_04_bis.gif';" onmouseout="this.src='images/image_04.gif';" alt="we" /></a></td>
		<td colspan="2">
 
			<img id="image_05" src="images/image_05.gif" width="158" height="35" alt="" /></td>
		<td>
			<a href="#" onClick="ShowPage(5)"><img src="images/image_06.gif" border="0" onmouseover="this.src='images/image_06_bis.gif';" onmouseout="this.src='images/image_06.gif';" alt="we" /></a></td>
		<td>
			<a href="#" onClick="ShowPage(1)"><img src="images/image_07.gif" border="0" onmouseover="this.src='images/image_07_bis.gif';" onmouseout="this.src='images/image_07.gif';" alt="Accueil" /></a></td>
	</tr>
	<tr>
		<td colspan="4" background="images/image_08.gif" width="406" height="243"><div align="center" style="height:240px; overflow:auto; width:406px">
		<p><br /><div id="page"></div></p>
 
		</div></td>
		<td colspan="3" rowspan="2" background="images/image_09.gif" width="372" height="304"><br/><br /><div id="album"></div>
		</td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/image_10.gif" width="406" height="61" alt=""></td>
	</tr>
	<tr>
 
		<td>
			<img src="images/spacer.gif" width="122" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="125" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="125" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
 
			<img src="images/spacer.gif" width="124" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="119" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="129" height="1" alt=""></td>
	</tr>
</table>
</td></tr>
</table>
</div>
</body>
 
</html>

**E.Bzz** · 16/02/2007, 14h48

Ben désolé, mais là je sèche

A+

**AllCoKe** · 16/02/2007, 21h53

ok, merci quand même

Si quelqu'un d'autres voit...

[AJAX] Script AJAX pour remplir deux "div"

JavaScript

Discussions similaires

Partager

Partager