[AJAX] Appel Ajax dans un appel Ajax avec JS et PHP

Version imprimable

13/08/2010, 09h30
Gajilidd

[AJAX] Appel Ajax dans un appel Ajax avec JS et PHP

Bonjour,

J'ai un souci et je ne sais pas comment le résoudre :?

J'ai un script php (PHP1) associé à un script javascript (JS1).
Dans ce javascript, une fonction fait un appel en Ajax sur une autre page php (PHP2) et insert le résultat de cet appel dans une division grâce à un innerHTML.

Jusque là tout va bien, l'inclusion du retour du script de PHP2 est bon, tout s'affiche et réagit comme convenu à une exception près ...

En effet dans mon script PHP2, un code Javascript est inséré et une fonction fait un appel Ajax vers un autre script php (PHP3) contenant aussi du javascript.

Depuis PHP1, j'obtiens PHP2 mais sans l'intégration de PHP3.
Mais de PHP2 j'obtiens correctement PHP3.

Comment faire prendre en compte à PHP1 l'existence de PHP3 à travers PHP2?

Je ne sais pas si j'ai été très clair :?

J'ai pu lire que la fonction javascript eval() permet d'exécuter du code javascript inclus dans un String mais j'ai pu faire quelques tests, sans résultats satisfaisant (peut être une mauvaise utilisation de ma part).

C'est un problème crucial pour moi, je me permet donc de détailler mon problème.

Premièrement, Mon appel Ajax a partir de la page chargée par l'utilisateur :

Code:

1
2
3
4
5
6
 
<div id='attachedFiles' style='text-align: left;'>
	<script type="text/javascript">
                getUpload("<?php echo $id_project;?>", "", "","<?php echo $_SESSION["login"];?>");
        </script>
</div>

La fonction appelée:

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 getUpload(project, cr, type, login){
    if (window.XMLHttpRequest) // Mozilla, Safari, ...
    	var xmlhttp = new XMLHttpRequest();
    else if (window.ActiveXObject) // IE
    	var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
 
	xmlhttp.open("GET", "TestUpload.php?project="+project+"&cr="+cr+"&type="+type+"&login="+login+"&random="+Math.random());
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState == 4)
		{
			// select the section to display
			if(type == ""){
				var div = "attachedFiles";
			}else if(type == "solution"){
				var div = "attachedFilesSolution";
			}else if(type == "whereUsed"){
				var div = "attachedFilesWhereUsed";
			}
 
			document.getElementById(div).innerHTML = xmlhttp.responseText;
 
		}
	};
	xmlhttp.send(null);
}

Une fois mon appel Ajax effectué, voilà le second appel Ajax fait sur le onload de la page cible du premier appel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function reloadFiles(readOnly, project, cr, type, login){
    if (window.XMLHttpRequest) // Mozilla, Safari, ...
    	var xmlhttp = new XMLHttpRequest();
    else if (window.ActiveXObject) // IE
    	var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
	xmlhttp.open("GET", "httpRequest/files.php?readOnly="+readOnly+"&project="+project+"&cr="+cr+"&type="+type+"&random="+Math.random());
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState == 4)
		{
			document.getElementById("files_<?php echo $type;?>").innerHTML = eval(xmlhttp.responseText);
		}
	};
	xmlhttp.send(null);
}

La page appelée par ce dernier appel est uniquement constituée de php et de html.

L'utilisateur n'a pas le retour Ajax dans la page qu'il visualise. Cependant si il charge la page cible du premier appel Ajax, la il voi le contenu attendu.

Peut on se faire suivre plusieurs appel Ajax?
Apparemment oui,

En simplifiant les fichiers on peut résumé comme ceci:

Page0.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html><body>
Ajax first
<script type="text/javascript">
        if (window.XMLHttpRequest) // Mozilla, Safari, ...
            var xmlhttp = new XMLHttpRequest();
        else if (window.ActiveXObject) // IE
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
 
        xmlhttp.open("GET", "./page1.php?random="+Math.random());
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState == 4)
                {
                        document.getElementById("toto").innerHTML = xmlhttp.responseText;
                }
        };
        xmlhttp.send(null);
</script>
<div id="toto"></div>
</body></html>

Page1.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html><body>
Page 1
<script type="text/javascript">
        if (window.XMLHttpRequest) // Mozilla, Safari, ...
            var xmlhttp = new XMLHttpRequest();
        else if (window.ActiveXObject) // IE
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
 
        xmlhttp.open("GET", "./page2.php?random="+Math.random());
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState == 4)
                {
                        document.getElementById("titi").innerHTML = xmlhttp.responseText;
                }
        };
        xmlhttp.send(null);
</script>
<div id="titi"></div>
</body></html>

Page2.html

Code:

<html><body>Page 2</body></html>

le resultat:

Citation:

Ajax first
Page 1

Par contre si je remplace

Code:

document.getElementById("toto").innerHTML = xmlhttp.responseText;

par

Code:

document.write(xmlhttp.responseText);

J'obtiens

Citation:

Page 1 Page 2

mais je peut entrevoir

Citation:

Ajax first

avant que Page 1 Page 2 ne s'affiche.

Je ne comprend pas pourquoi je n'arrive pas avoir ma Page2.html. :cry:

16/08/2010, 15h08
llaffont

Citation:

Envoyé par Gajilidd

Bonjour,

J'ai un souci et je ne sais pas comment le résoudre :?

J'ai un script php (PHP1) associé à un script javascript (JS1).
Dans ce javascript, une fonction fait un appel en Ajax sur une autre page php (PHP2) et insert le résultat de cet appel dans une division grâce à un innerHTML.

Jusque là tout va bien, l'inclusion du retour du script de PHP2 est bon, tout s'affiche et réagit comme convenu à une exception près ...

Ici c'est l'utilisation normal d'une requete AJAX, rien à dire;

Citation:

Envoyé par Gajilidd

En effet dans mon script PHP2, un code Javascript est inséré et une fonction fait un appel Ajax vers un autre script php (PHP3) contenant aussi du javascript.

Pourquoi ce n'est pas JS1 lors du succès du chargement de PHP2 qui fait cette opération ?

Tu peux très bien enchainer les requête AJAX dans JS1.
16/08/2010, 15h38
Gajilidd

Oui je pourrais en effet mais mon but n'est pas la, j'aimerais garder ma structure de fichier pour me permettre d'avoir une sorte de module que je pourrais inclure ou bon me semble dans mes pages.

Donc garder Php2 avec un appel Ajax vers Php3 pour me permettre d'insérer ce modèle partout grâce a un appel Ajax. :piou:

Il va falloir que tu trouves un autre moyen :

Pourquoi les événements disparaissent après une mise à jour avec AJAX ?

Je pense qu'il en est de même pour le script JS injecté. ce que fait une requête AJAX.

Il te reste plus qu'à mettre tous tes scripts dans la balise HEAD. (Attention ça charge la mémoire pour rien) ou trouver un autre moyen de gérer ton imbrication de page.

Je profite également pour corriger tes exemples

Page0.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html><body> Ajax first <script type="text/javascript"> if (window.XMLHttpRequest) // Mozilla, Safari, ... var xmlhttp = new XMLHttpRequest(); else if (window.ActiveXObject) // IE var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET", "./page1.php?random="+Math.random()); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4) { document.getElementById("toto").innerHTML = xmlhttp.responseText; } }; xmlhttp.send(null); </script> <div id="toto"></div> </body></html>
Page1.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div> Page 1 <script type="text/javascript"> if (window.XMLHttpRequest) // Mozilla, Safari, ... var xmlhttp = new XMLHttpRequest(); else if (window.ActiveXObject) // IE var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET", "./page2.php?random="+Math.random()); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4) { document.getElementById("titi").innerHTML = xmlhttp.responseText; } }; xmlhttp.send(null); </script> <div id="titi"></div> </div>
Page2.html
Code:

1 2 <div>Page 2</div>
Je ne pense pas que tu injectes une page structurer dans une autre page structurer. Sinon il faut revoir tes leçons Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

Bonjour,

J'ai un problème similaire, mais je ne sais pas si c'est exactement le même.

Voilà, j'essaye d'accéder en javascript à un objet chargé par par xmlhttprequest. Seulement que ça marche pas...

Voilà mon code:

Le code chargé en asynchrone

Code:

1
2
3
4
5
6
7
 
<form method="post" action="?dialog=LogLost&state=check" name="form_lost" class="form" >
	<label>Email *</label><input type="text" name="data1" /><br />
	<label>T&eacute;l mobile *</label><input type="text" name="data2" /><br />
	<p>* les champs marqu&eacute;s avec une croix sont obligatoires</p>
	<input class="btSubmit" type="submit" name="submit" value="Verifier" />
</form>

Le code javascript:

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
 
function createXhrObject() {
    if (window.XMLHttpRequest) return new XMLHttpRequest();
 
    if (window.ActiveXObject){
        var names = [
            "Msxml2.XMLHTTP.6.0",
            "Msxml2.XMLHTTP.3.0",
            "Msxml2.XMLHTTP",
            "Microsoft.XMLHTTP"
        ];
        for(var i in names){
            try{ return new ActiveXObject(names[i]);}
            catch(e){}
        }
    }
    window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
    return null; // non supporté
}
 
function chargeContent(){
	xhr = createXhrObject();
	xhr.onreadystatechange = function() {
		if (xhr.readyState==4) {
			$('#dialog-box').html(xhr.responseText);
			$('#dialog-box').dialog('open');
		}
	};
 
	xhr.open("GET", "inc/inc_form_loglost.php" , true);
	xhr.send(null);
}
 
$('.btDialog').click(function() {
	chargeContent();
});
 
$('.btSubmit').click(function() {
	alert('test submit');
});

(j'ai essayer de simplifier le code au max, j'espère rien avoir omit...)

Où ça bloque, c'est donc la dernière opération sur .btSubmit

N'hésitez pas à me gronder si j'ai fais de grossières erreurs.

hum okok donc je ne peut pas se faire succeder plusieurs appel Ajax ....

Donc je dois remplacer mon premier appel par un include() en php par exemple?
Code:

1 2 3 4 5 6 7 8 9 10 <div id='attachedFiles' style='text-align: left;'> <?php $login = $_SESSION["login"]; $project = $id_project; $cr = ''; $type = ''; include 'TestUpload.php'; ?> </div>
Citation:

Il te reste plus qu'à mettre tous tes scripts dans la balise HEAD.

Pour le Js dans le Head mon prédécesseur (développer) n'y tenais pas compte, des balises script se trimbalent un peut partout.

Quand je fait ca, J'ai bien ma page TestUpload.php qui se charge. Cependant le reste ne se fait pas (comme avant), peut être car mon

Code:

window.onload = reloadFiles();

en plein milieu de code ne fonctionne pas?

Ma façon d'inclure est-elle correcte?

17/08/2010, 11h07
llaffont

Citation:

Envoyé par llaffont

Il te reste plus qu'à mettre tous tes scripts dans la balise HEAD. (Attention ça charge la mémoire pour rien) ou trouver un autre moyen de gérer ton imbrication de page.

Mes propos ne sont pas vraiment juste :

Tes scripts seront bien pris en compte à ce moment la mais tous les événements qui si rapporte seront ignoré dès la première imbrication AJAX.

Il faudra re -déclaré les évènements après le succès du chargement de ta requête AJAX. (voir réponse fait à dorignan juste en dessous)

Un conseil regarde du côté d'un Framework comme JQUERY si tu n'utilises AJAX que pour de l'aspect.

Citation:

Envoyé par dorignan

Où ça bloque, c'est donc la dernière opération sur .btSubmit

Essaye ça ! et relis
Pourquoi les événements disparaissent après une mise à jour avec AJAX ? si tu veux comprendre la raison.

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
 
function createXhrObject() {
    if (window.XMLHttpRequest) return new XMLHttpRequest();
 
    if (window.ActiveXObject){
        var names = [
            "Msxml2.XMLHTTP.6.0",
            "Msxml2.XMLHTTP.3.0",
            "Msxml2.XMLHTTP",
            "Microsoft.XMLHTTP"
        ];
        for(var i in names){
            try{ return new ActiveXObject(names[i]);}
            catch(e){}
        }
    }
    window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
    return null; // non supporté
}
 
function chargeContent(){
	xhr = createXhrObject();
	xhr.onreadystatechange = function() {
		if (xhr.readyState==4) {
			$('#dialog-box').html(xhr.responseText);
			$('#dialog-box').dialog('open');
eventClickbtSubmit();
eventClickbtDialog();
		}
	};
 
	xhr.open("GET", "inc/inc_form_loglost.php" , true);
	xhr.send(null);
}
 
function eventClickbtDialog(){
$('.btDialog').click(function() {
	chargeContent();
});
}
function eventClickbtSubmit(){
$('.btSubmit').click(function() {
	alert('test submit');
});
 
}

17/08/2010, 11h32
Gajilidd

Hum ok je comprend un peut mieux, mais une chose me chiffonne, quand j'appel ma page TestUpload.php directement par le navigateur, j'ai la page à 100% fonctionnelle. Mais quand je l'inclue par php dans une autre page, elle ne l'est plus, la collection d'objets HTMLElement aurait du être faite avec cette inclusion?

Donc mes événements venant de mon appel Ajax devraient être bon comme mon appel depuis la page source (sans inclusion)?

Si non, comment forcer la régénération de cette collection, dans la FAQ, l'auteur parle de la fonction afterAjax(), comment la créer ou où la trouver (savoir la créer me conviendrais mieux)?

Peut-on appeler à nouveau la fonction appelé au chargement ou faut-il recréer cette collection?

Edit: Apparemment cela ne fonctionnais pas a cause d'un eval() qui traînais encore.

Maintenant une grande question se pose, dans ma page une valeur s'actualise en Javascript, comment faire en sorte de re-inclure ma page avec les nouvelles données? Sans rechargement de la page?
27/08/2010, 12h36
Invité

Pour donner des nouvelles, la solutions de mettre l'écouteur du click dans une fonction, appelée après le chargement des données, fonctionne.

Merci beaucoup pour le coup de main!