Discussion :

[vidzo]

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?

[E.Bzz]

Bonjour,

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+

[DiDieuh]

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 ?

[vidzo]

La page a.php:

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
<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 :

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
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 :

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
<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.

[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 :

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

paramind.innerHTML += resultatind;

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

A+

[andry.aime]

Bonjour,

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

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

Code :

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

var paramind = document.getElementById(id);

[vidzo]

En effet, c'est bien comme cela:

Code :

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

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.

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"

[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 :

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

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 :

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

return false;

EDIT : mais pour faire encore plus simple, un

Code :

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

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

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

A+

[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é.

[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

A+

[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.