Discussion :

[johnson95]

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 :

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

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

[Bovino]

Code :

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

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

[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

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

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

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 :

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

1
2
3
for(i=0;i<resultat.length;i++){
document.getElementById('test'+i).innerHTML = resultat[i]
}

[zintelix3d]

Code :

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

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 :

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

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

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

[johnson95]

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 :

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

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
 
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);