[AJAX] Modifier deux balises <div> avec une fonction innerhtml

Version imprimable

Bonjour,

Je possède sur une page internet :
une liste
deux tableaux

Ainsi lorsque je sélectionne un choix sur la liste, il faut que les deux tableaux se modifient, pour éviter de recharger la page, j'utilise actuellement "Innerhtml" qui me permet de modifier un tableau qui se trouve dans une balise <div>.

Maintenant je dois modifier un second tableau, celui ci ne peut être insérer dans la même balise <div> je me retrouve donc avec deux div à modifier.

Est'il possible de le faire avec innerhtml ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function change(limite,mois,annee) { getXhr(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById('test').innerHTML=xhr.responseText; } } xhr.open("GET","tab_dyn.php?titre="+document.form1.select.options[document.form1.select.selectedIndex].text+"&mois="+mois+"&annee="+annee+"&nbr_jour="+limite,true); xhr.send(null); }
J'ai deja essayé de mettre deux evenements differents sur la liste afin d'appeller deux fonctions "innerhtml" différentes (bricolage je l'avoue) mais cela ne fonctionne pas!

Merci de votre aide

Code:

1
2
3
4
5
if(xhr.readyState == 4 && xhr.status == 200)
     {
     	document.getElementById('test').innerHTML=xhr.responseText;
     	document.getElementById('test2').innerHTML=xhr.responseText;
     }

12/08/2008, 17h29
johnson95

Merci de ta réponse.

Cependant, comment peut on ensuite spécifier le code que l'on veut placer ?
Dans l'exemple mit ci dessus, à la place de la balise test, on aura le contenu du fichier tab_dyn.php et dans al seconde div peut on mettre un second fichier tab_dyn2 ??

Merci de ton aide
12/08/2008, 18h02
Bovino
Non, dans ton script php, tu concatènes les valeurs souhaitées pour chaque champ en les séparant par un séparateur quelconque (par exemple / ou ; ou ce que tu veux, même un truc du genre <br>...) puis coté javascript, tu sépares le responseText avec un

Code:

var resultat = xhr.responseText.split('séparateur');

et tu obtiens un tableau des différentes valeurs souhaitées, ainsi, si tes div s'appellent test0 et test1 par exemple, tu peux faire une boucle
Code:

1 2 3 for(i=0;i<resultat.length;i++){ document.getElementById('test'+i).innerHTML = resultat[i] }
12/08/2008, 18h05
zintelix3d
Citation:
Envoyé par Bovino

Code:

1 2 3 4 5 if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById('test').innerHTML=xhr.responseText; document.getElementById('test2').innerHTML=xhr.responseText; }
Effectivement la t'aura le même contenu 2 fois dans test et test2, y a 2 solutions,

1.soit tu utilise xhr1 et xhr2 avec 2 open différents.
2.soit dans ton tab_dyn.php, tu met,

Code:

echo tableau1.'|'.tableau2;

en séparant le contenu des 2 tableau par un caractère spécial genre '|', ou un autre à condition qu'il ne figure pas ni dans tableau1 ni dans tableau2, puis tu récupère

Citation:

if(xhr.readyState == 4 && xhr.status == 200)
{
var reponse=xhr.responseText;
var tab=reponse.split('|');
document.getElementById('test').innerHTML=tab[0];
document.getElementById('test2').innerHTML=tab[1];
}

bonne chance :king:

Merci de ton aide !

En fait, pour simplifier les explications, j'ai fais passer cela en deux tableaux mais en fait c'est un peu plus compliqué donc je vais essayé avec ta première méthode!

Cependant je voulais savoir :

quand tu dis xhr1 et xhr2, on fait tout dans la meme fonction comme ceci :

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
 
function change(limite,mois,annee) 
{ 	
	getXhr1();
	xhr1.onreadystatechange = function()
    {
     if(xhr1.readyState == 4 && xhr1.status == 200)
     {
     	document.getElementById('test').innerHTML=xhr1.responseText;
     }
    }
xhr1.open("GET","tab_dyn.php?titre="+document.form1.select.options[document.form1.select.selectedIndex].text+"&mois="+mois+"&annee="+annee+"&nbr_jour="+limite,true);
xhr1.send(null);
 
	getXhr2();
	xhr2.onreadystatechange = function()
    {
     if(xhr2.readyState == 4 && xhr2.status == 200)
     {
     	document.getElementById('image').innerHTML=xhr2.responseText;
     }
    }
xhr2.open("GET","tab_dyn2.php?titre="+document.form1.select.options[document.form1.select.selectedIndex].text+"&mois="+mois+"&annee="+annee+"&nbr_jour="+limite,true);
xhr2.send(null);
}

ou il faut le séparer en deux fonctions et faire passer cela sous deux evenements sur la liste ?

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
 
function change(limite,mois,annee) 
{ 	
	getXhr1();
	xhr1.onreadystatechange = function()
    {
     if(xhr1.readyState == 4 && xhr1.status == 200)
     {
     	document.getElementById('test').innerHTML=xhr1.responseText;
     }
    }
xhr1.open("GET","tab_dyn.php?titre="+document.form1.select.options[document.form1.select.selectedIndex].text+"&mois="+mois+"&annee="+annee+"&nbr_jour="+limite,true);
xhr1.send(null);
 
et 
 
function change2() 
{ 	
	getXhr2();
	xhr2.onreadystatechange = function()
    {
     if(xhr2.readyState == 4 && xhr2.status == 200)
     {
     	document.getElementById('image').innerHTML=xhr2.responseText;
     }
    }
xhr1.open("GET","tab_dyn2.php?titre="+document.form1.select.options[document.form1.select.selectedIndex].text+"&mois="+mois+"&annee="+annee+"&nbr_jour="+limite,true);
xhr2.send(null);