[AJAX] Boucle qui insère x fois une page dans un div?

Version imprimable

24/09/2009, 10h26
vidzo

[AJAX] Boucle qui insère x fois une page dans un div?

Bonjour à tous,

Je rencontre un petit problème, et j'en viens à me demander si ce que je veux faire est réalisable. Je m'explique:

J'ai une page a.php qui, en utilisant AJAX, affiche une page b.php dans un div (<div id='b'></div>) qui se trouve sur la page a.php .
Jusqu'ici, tout se passe bien.
Mais je veux maintenant que b.php puisse elle aussi s'appeler (lorsque l'on clique sur un bouton), et s'afficher à la suite du "premier" b.php dans le même div sur la page a.php.

Est-ce possible à réaliser? Est-il possible d'insérer du code avec ajax dans un div qui n'est pas vide?
24/09/2009, 11h28
E.Bzz

Bonjour,

Citation:

Envoyé par vidzo

Est-ce possible à réaliser?

La réponse est "Oui", mais sans voir ton code (HTML + JavaScript : pas de PHP !), difficile de t'orienter ;)

A+
24/09/2009, 11h54
DiDieuh

Citation:

Envoyé par vidzo

Mais je veux maintenant que b.php puisse elle aussi s'appeler (lorsque l'on clique sur un bouton), et s'afficher à la suite du "premier" b.php dans le même div sur la page a.php.

Pourquoi ne pas créé direct une boucle dans ton b.php ?

La page a.php:

Code:

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
<form id="pp">
 
<select  name='param1' id='1'>
	<option value='id_val1'>val1</option>
	<option value='id_val2'>val3</option>
	...
	<option value='id_valn'>valn</option>
</select>
 
<select  name='param2' id='2'>
	<option value='id_val1'>val1</option>
	<option value='id_val2'>val3</option>
	...
	<option value='id_valn'>valn</option>
</select>
 
...
 
<select  name='paramn' id='n'>
	<option value='id_val1'>val1</option>
	<option value='id_val2'>val3</option>
	...
	<option value='id_valn'>valn</option>
</select>
 
</form>
 
<input type="submit" value="Valider" onclick="
		var tab = document.forms['pp'].elements;
		var val1 = tab[0].options[tab[0].selectedIndex].value;
		var req ='id_valeur='+val1;
 
		for(i = 1; i < tab.length; i++)
		{
			req = req+' OR id_valeur='+tab[i].options[tab[i].selectedIndex].value;
		}
 
		loadb(req, '3', '18', '<?php echo"blocb";?>');
"/>
 
 
 
<div id="blocb"></div><!-- Fin du div blocb -->

La fonction loadb:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function loadb(req, rel, board, id) {
 
var paramind = document.getElementById('id');
paramind.innerHTML = "In process, please wait...";
creerRequete();
var url = 'b.php?board='+board+'&rel='+rel+'&req='+req;
requete.open('GET', url, true);
 
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
 
var resultatind = requete.responseText;
paramind.innerHTML = resultatind;
}
}
};
requete.send(null);
 
}

La page b.php:

Code:

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
<form id="pp2">
 
<select  name='paramn+1' id='n+1'>
	<option value='id_val1'>val1</option>
	<option value='id_val2'>val3</option>
	...
	<option value='id_valn'>valn</option>
</select>
 
...
 
<select  name='paramn+n' id='n+n'>
	<option value='id_val1'>val1</option>
	<option value='id_val2'>val3</option>
	...
	<option value='id_valn'>valn</option>
</select>
 
</form>
 
<input type="submit" value="Valider" onclick="
	var tab2 = document.forms['pp2'].elements;
	var req ='<?php echo $req; ?>';
 
	for(i = 0; i < tab2.length; i++)
	{
		req = req+' OR id_valeur='+tab2[i].options[tab2[i].selectedIndex].value;
	}
 
	loadb(req, '3', '18', '<?php echo"blocb";?>');
"/>

Voila un exemple de code html généré.
Lorsque l'on clique sur le bouton "Valider" de la page a.php, la fonction loadb est appelée, et elle charge dans le div "blocb" (qui est sur a.php) le contenu de b.php.
Jusqu'ici, ca marche.

Je voudrais maintenant que lorsqu'on clique sur le bouton Valider de la page b.php, cette même page soit rechargée dans le div "blocb", sans écraser ce qui a préalablement été chargé dans ce div.

24/09/2009, 12h08
E.Bzz

A priori, c'est là que ça se passe : il suffit de concaténer au innerHTML existant au lieu de le remplacer

Code:

paramind.innerHTML += resultatind;

Il y aura peut-être quelques ajustements à faire ...

A+
24/09/2009, 13h18
andry.aime

Bonjour,

Citation:

var paramind = document.getElementById('id');

En regardant les paramètres de la fonction, je pense que tu veux dire:

Code:

var paramind = document.getElementById(id);
24/09/2009, 13h47
vidzo

En effet, c'est bien comme cela:

Code:

var paramind = document.getElementById(id);

Pour la concaténation:
Mettre paramind.innerHTML += resultatind; ne change apparement rien. (Je parle au niveau du résultat visuel).
Je réfléchis aux ajustements que je peux faire, mais je reste bloqué pour l'instant.

Citation:

Pourquoi ne pas créer direct une boucle dans ton b.php ?

Je ne peux pas faire un while tout simple, car ce qui sera affiché dans le second "b.php" dépendra des choix faits dans le ou les selects du premier "b.php"
24/09/2009, 13h54
E.Bzz

Tel que tu l'appelles (onclick du bouton submit), la page risque de se recharger ...
Essaye de terminer ton onclick par un

Code:

return false;

afin de l'empêcher.

Mais pour ce genre d'appel (un submit qui ne doit pas s'exécuter), on passe généralement par le onsubmit du <form> (en terminant aussi par le

Code:

return false;

EDIT : mais pour faire encore plus simple, un

Code:

<input type="button" onclick="...">

ferait tout aussi bien l'affaire (sans les inconvénients) ;)

A+
24/09/2009, 14h22
vidzo

Au final, je me suis débrouillé autrement, en générant un nouveau div a l'intérieur du précédant a chaque fois que la pages b.php est appelée.

Merci a tous ceux qui m'ont aidé.
24/09/2009, 14h32
E.Bzz

Autrement ?
Non, c'est la même chose, mais tu as dû faire une manip qui a involontairement résolu le vrai problème.

... ce qui est le principal ;)

Ceci dit, il y a un inconvénient avec tes div imbriqués : j'éspère que tu n'auras pas à en supprimer un en milieu de liste :mouarf:

A+
24/09/2009, 16h04
vidzo

Oui, c'est le principal:) et non, je n'aurais pas besoin de supprimer des div.
Et en utilisant un nouveau div a chaque fois, je n'ai plus besoin de concatenation.