[AJAX] Remplissage de 2 DIV

Version imprimable

Bonsoir,

J'essaye de remplir 2 DIV dans une page via AJAX mais après execution du code seul la dernière, dans l'ordre d'appel, est remplis.
Petit exemple:
mes 2 DIV:

Code:

1
2
<div id="div_mysql" style="width:400px;height:100px;overflow:auto"></div>
<div id="div_utilisateur" style="width:800px;height:400px;overflow:auto"></div>

mon code JS appelant les fonctions AJAX (ressemblant étrangement au tuto ;) )

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
function ajx_mysql() {
	getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById('div_mysql').innerHTML = xhr.responseText;
		}
	}
	url_ajax = "ajax.php?step=1";
	xhr.open("GET",url_ajax,true);
	xhr.send(null);
}
function ajx_utilisateur(){
	getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById('div_utilisateur').innerHTML = hr.responseText;
		}
	}
	url_ajax = "ajax.php?step=1";
	xhr.open("GET",url_ajax,true);
	xhr.send(null);
}
function onchange_connect() {
	ajx_mysql();
	ajx_utilisateur();
}

Ici seul la div_utilisateur (appelé par ajx_utilisateur) est remplis.
Si j'intervertis les 2 appel ajx... alors c'est la div_mysql qui est remplis.

Donc comment faire pour avoir mes 2 DIV remplis?

Il existe la solution d'une seule fonction qui récupère un xml, ca peut etre interessant, non ?

Sinon il y aurait pas une erreur dans ton code ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function ajx_utilisateur(){
	getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById('div_utilisateur').innerHTML = hr.responseText;
		}
	}
	url_ajax = "ajax.php?step=1";
	xhr.open("GET",url_ajax,true);
	xhr.send(null);
}

22/07/2006, 07h39
effree

Le code est bon (j'ai bien xhr. xhez moi) c'est en collant que j'ai du rater mon coup :aie:

C'est quoi cette histoire de récupérer une réponse en xml? Ca marche comment, si t'as un lien vers un tuto (je débute en AJAX).
Mais il faut aussi que je puisse remplir mes 2 DIV indépendamment l'une de l'autre (changé le contenu de l'une sans changer l'autre).

pff...
Combien de fois je devrai encore dire que ce tuto est mal fait ???
On peut vraiment pas s'arrganger pour le changer ???

Correction :

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
55
56
57
58
59
60
61
62
63
64
65
66
// Mes fonctions JS pour obtenir un objet XmlHttpRequest
pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
        throw "Could not retreive a valid progID of Class";
    idList = null;
    return o2Store;
}

GetXmlHttpRequest_AXO=null
GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
		if (!GetXmlHttpRequest_AXO) {
			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		}
		return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
	return false;
}

/// Pour rester compatible avec le tuto
getXhr=GetXmlHttpRequest;

function ajx_mysql() {
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById('div_mysql').innerHTML = xhr.responseText;
		}
	}
	url_ajax = "ajax.php?step=1";
	xhr.open("GET",url_ajax,true);
	xhr.send(null);
}
function ajx_utilisateur(){
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById('div_utilisateur').innerHTML = hr.responseText;
		}
	}
	url_ajax = "ajax.php?step=1";
	xhr.open("GET",url_ajax,true);
	xhr.send(null);
}
function onchange_connect() {
	ajx_mysql();
	ajx_utilisateur();
}

22/07/2006, 12h03
effree

FremyCompany : ca marche :D

Avant de 'résoudre' le post, peux-tu m'expliquer les avantages de ton script, en comparaison de celui du tuto. J'voudrais juste comprendre.
23/07/2006, 14h18
FremyCompany

Script du tuto :
Le script fonctionne bien dans les conditions suivantes :
- Une reqête ou requêtes très espacées dans le temps
- 2 types d'ActiveX pris en charge (les plus courrants)

Mon script :
Mon script fonctionne bien dans toutes les conditions :
- Autant de requêtes que l'on veut sans espacement dans le temps obligatoire
- Un grand nombre d'ActiveX pris en charge