Conflits lors de deux requêtes AJAX dans la même fonction js

[fayred]

Bonjour,

Je sollicite votre aide sur une fonction javascript ou je souhaite faire deux requêtes AJAX mais où les résultats des rêquetes font pour l'instant un peu n'importe quoi...
Je m'explique : je souhaite mettre à jour deux div très différents l'un contenant un tableau et l'autre des bouton.
Voici la syntaxe que j'utilise pour récupérer le tableau et l'insérer dans le div adéquat :

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
44
45
46
47
48
49
50
51
52
53
54
 
var requete = null;
 
function creerRequete()
{
    try
    {
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
 
 
function rechargerTableau()
{
	var tableau = document.getElementById('tableau');
 
        creerRequete();
        var url = 'php/tabHoraires.php';
 
 
       requete.onreadystatechange = function()
        {
            if(requete.readyState == 4)
            {
               if(requete.status == 200)
                {
                     tableau.innerHTML=requete.responseText;			   
                }
            }
        };
		 requete.open('GET', url, true);
		requete.send(null);

Ce code marche très bien mais si je rajoute la requete concernant les boutons, il me met les boutons à la place du tableau et ne m'affiche pas la tableau...

En fait, je me suis rendue compte que c'était la définition de fonction (anonyme) suivante qui posait problème:

Code :

1
2
3
4
5
6
7
8
9
10
requete.onreadystatechange = function()
        {
            if(requete.readyState == 4)
            {
               if(requete.status == 200)
                {
                   tableau.innerHTML=requete.responseText;	   
                }
            }
        };

En effet, lorsque je met deux requetes à la suite je redefinis la fontion et donc forcement ça fait n'importe quoi...

Comment faire pour créer la fonction dans la première requete, l'éxécuter dans la première puis la redéfinir pour la deuxième requete?

Je sais pas si je suis très claire...N'hésitez pas à me poser des questions!

Merci pour votre aide!

[Bovino]

Le problème ici, c'est que le résultat est affiché dans la même div... Donc soit tu as juste le 2e résultat qui s'affiche, soit tu as 2 div avec le même id (c'est mal).

Tu devrais passer l'id cible en paramètre...

Code :

1
2
3
function rechargerTableau(id_cible)
{
	var tableau = document.getElementById(id_cible);

[fayred]

Jamais je n'aurais osé faire deux div avec le même id... m'enfin...
Effectivement, je n'ai que le deuxième résultat qui s'affiche...
Ce que tu proposes c'est de creer plusieurs fonctions js selon les div, c'est bien ça?
Dommage que l'on ne puisse pas faire plusieurs requetes ajax dans une seule fonction... enfin tant pis le principal, c'est que ça fonctionne!

Je teste ça dès mardi, merci pour ton aide!

[Bovino]

Si tu peux faire plusieurs requête dans une seule fonction, mais dans ton cas, l'élément à mettre à jour est le même, donc il se met à jour deux fois... et si ça va suffisamment vite, tu ne t'en rends pas compte.
Le tout si tu effectues plusieurs requêtes, c'est de bien différencier ce que tu fais avec le résultat obtenu...
Tu peux même ne faire qu'une requête, coté serveur, tu concatènes les résultats (exemple : résultat1-résultat2), et quand tu reçois la réponse, tu la splittes grâce au séparateur (dans mon exemple "-") et tu affectes chaques portion à l'élément désiré.

[fayred]

Merci pour ton aide, mais je ne comprends pas tout...

J'ai essayé de faire deux fonctions différentes mais ça me fait la même chose qu'avant :

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
 
function charger()
{
	var tableau = document.getElementById('tab');
        creerRequete();
        var url = 'php/tabHoraires.php';
        requete.open('GET', url, true);
 
        requete.onreadystatechange = function()
        {
            if(requete.readyState == 4)
            {
               if(requete.status == 200)
                {
                  tableau.innerHTML=requete.responseText;	
                }
            }
        };
	requete.send(null);
}
 
 
function maj()
	var maj2 = document.getElementById('maj');
 
        creerRequete();
        var url = 'php/formulaires/majSemaine.php';
        requete.open('GET', url, true);
 
        requete.onreadystatechange = function()
        {
            if(requete.readyState == 4)
            {
               if(requete.status == 200)
                {
                   majSemaine.innerHTML=requete.responseText;	
                }
            }
        };
	requete.send(null);
}

J'appelle ces deux fonctions sur un onchange="charger();maj();".

Je ne peux pas trop concatener les résultats car d'un coté je recupere un tableau d'au moins cent lignes et 50 colonnes et de l'autre coté des boutons.

Quand tu parles de passer des paramètres, tu veux dire pour la fonction onreadystatechange? Mais vu que c'est une fonction anonyme, forcément dès que j'aurais passé un paramètre il le conservera pour la requete suivante?

Désolé de pas tout suivre et merci encore pour ton aide

[Bovino]

Code :

majSemaine.innerHTML=requete.responseText;

Là tu te trompes de variable (celle que tu as définie, c'est 'maj2') en plus, tu as oublié l'accolade ouvrante de ta fonction maj(), donc ça marche pas...
Sinon, quand je parle de passer des paramètres, c'est au niveau de la fonction maj ou charger, qui font exactement la même chose avec juste l'url et l'élément cible qui changent.
Donc si tu appelles par exemple charger(url,cible), tu peux traiter comme ça :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function charger(url, cible)
{
	var tableau = document.getElementById(cible);
        creerRequete();
        requete.open('GET', url, true);
 
        requete.onreadystatechange = function()
        {
            if(requete.readyState == 4)
            {
               if(requete.status == 200)
                {
                  tableau.innerHTML=requete.responseText;	
                }
            }
        };
	requete.send(null);
}