[AJAX] Du javascript dans Ajax

**bee37** · 30/07/2013, 11h11

Bonjour à tous et à toutes,

Après moulte fouilles à droite et à gauche, sur google, et sur différents forum (dont celui ci), je n'ai plus d'autre choix que de poster et demander votre aide.

Voilà, comme l'indique l'intitulé, je voudrais exécuter du javascript dans un fichier qui est appelé en AJAX.

C'est simple, j'ai ma page principale page1.php, qui fait appelle à page2.php via Ajax. Cette page "page2.php", permet d'afficher dans certains cas, une div dans "page1.php". Seulement voilà, cette div qui s'affiche, j'y ai introduit un bouton <input type="button"> avec un évènement "onClick" qui doit faire appelle à une fonction javascript, qui cache cette div. (En effet, c'est une div avec un message d'alerte, et le client doit pouvoir fermer cette "fenêtre" quand il le souhaite. J'ai donc décidé de cacher la div).

Seulement voilà, rien à faire, le bouton ne fonctionne pas (je précise que si je lance "page2.php" seule, le bouton fonctionne). Le script n'est pas pris en compte. Dans les recherches que j'ai effectué, j'ai trouvé des choses, je l'avoue, mais je n'ai soit pas compris, soit les informations étaient trop flou. Je me retourne donc vers vous.

Est-il possible de faire appelle à partir de "page2.php" (AJAX), à des fonctions Javascript?

Merci de votre attention, j'espère avoir été clair et précis.

Cordialement,

Bertrand

Invité · 31/07/2013, 16h26

Bonjour,
=> FAQ : Comment évaluer le contenu des balises script retourné par un appel Ajax?

Pour répondre plus précisément, il faudrait une version (simplifiée) de ton code :
- page1.php
- page2.php
- + fonction JavaScript appelée dans page2.php

**bee37** · 01/08/2013, 09h22

Bonjour, merci de votre réponse,

J'ai été voir votre lien (que je n'avais pas vu en cherchant, je m'en excuse). En effet, c'est ce qu'il me faudrait, l'exemple fournit est très intéressant. Mais je n'arrive pas bien à comprendre.

Comme demandé, voici mon code :

page1.php

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
	<title>Page de test</title>
 
</head>
<body onLoad="go()">
<script type="text/javascript">
	function getXhr(){
		var xhr = null;
		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest();
		else if(window.ActiveXObject){
			try {
				xhr = new ActiveXObject("Msxm12.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else {
			alert("Votre navigateur ne supporte pas les objets XMLHTTP...");
			xhr = false;
		}
		return xhr;
 
	}
 
	function go(){
 
		var xhr = getXhr();
		xhr.open("GET", "page2.php", true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200) {
 
				document.getElementById("MyDiv").innerHTML = xhr.responseText;
				//evalueScripts('script');
			}
		}
 
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
		xhr.send(null);
	}
</script>
<div id="MyDiv">
 
</div>
</body>
 
</html>

page2.php

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
 
<script type="text/javascript">
 
	function cacher(){
		if(document.getElementById('barreflottante').style.visibility == "visible")
		{
			document.getElementById('barreflottante').style.visibility = "hidden";
		}
 
	function maFonction(){
		alert('Ok');
	}
</script>
<style>
#barreflottante
{
	position:fixed;
	width:250px;
	height:100px;
	right:5px;
	bottom:5px;
	z-index:110;
	background:#a1a1a1;
	border:
	1px
	solid
	#000000;
}
 
</style>
</head>
<body>
 
 
 
 
<div id="barreflottante" style="visibility:visible;">
	<div style="margin-top:20px;margin-left:14px;">
		Nouvelles alertes enregistrées
	</div>
	<br/><input id="bouton" type="button" style="margin-left:175px;" onclick="maFonction()" value="Fermer">
</div>
 
 
</body>
</html>

C'est un code test, tout simple, une première page qu'appelle une autre pour afficher une div, dans cette div, il y a un bouton, en cliquant, une alerte devrait s'afficher, mais c'est là que ca coince. (Dans le test je voudrais juste afficher une alerte, après, je pourrais faire disparaitre la div je pense: fonction Cacher()). En attendant une réponse, je vais essayer d'introduire le bout de code de l'exemple du liens.

Encore merci de prendre du temps à mon égard,

Bertrand

Invité · 01/08/2013, 10h21

Bonjour,

Code :

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

document.getElementById("MyDiv").innerHTML=...;

Ca signifie que via Ajax, on ajoute le code de page2 DANS le div "MyDiv" de page1.

Par conséquent :
- il faut supprimer les balises <html>, <head>,<body> de page2.php
- les scripts/fonctions JavaScript et style CSS de page2.php peuvent être transférés dans page1.php => du coup, plus de problème d'interprétation.

**bee37** · 01/08/2013, 10h39

Bon sang, c'est vrai que la ligne que vous avez mentionné indique un ajout de code dans la page initiale ! J'ai pas fait le rapprochement. Donc j'ai bien supprimé les balises <HTML>, <HEAD> et <BODY> de la page2.php.

Dans la logique, ca devrait fonctionner, comme vous dites

les scripts/fonctions JavaScript et style CSS de page2.php peuvent être transférés dans page1.php => du coup, plus de problème d'interprétation.

Mais je comprend pas, rien ne se passe...

page1.php

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
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
<html>
<head>
	<title>Page de test</title>
 
</head>
<body onLoad="go()">
<script type="text/javascript">
	function getXhr(){
		var xhr = null;
		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest();
		else if(window.ActiveXObject){
			try {
				xhr = new ActiveXObject("Msxm12.XMLHTTP");
			} catch (e) {
				try {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e1) {
					xhr = null;
				}
			}
		}
		else {
			alert("Votre navigateur ne supporte pas les objets XMLHTTP...");
			xhr = false;
		}
		return xhr;
 
	}
 
	function go(){
		var xhr = getXhr();
		xhr.open("GET", "page2.php");
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.responseText) {
 
				document.getElementById("MyDiv").innerHTML = xhr.responseText;
				evalueScripts('MyDiv');
			}
		};
 
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
		xhr.send(null);
	}
 
 
	function evalueScripts(targetId) {
      var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
      for (var i=0; i<mesScripts.length; i++) {
              eval(mesScripts[i].innerHTML);
      }
	}
</script>
 
<div id="MyDiv">
 
</div>
 
</body>
 
</html>

page2.php

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
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
 
 
	function cacher(){
		if(document.getElementById('barreflottante').style.visibility == "visible")
		{
			document.getElementById('barreflottante').style.visibility = "hidden";
		}
 
	function maFonction(){
		alert('Ok');
	}
</script>
<style>
#barreflottante
{
	position:fixed;
	width:250px;
	height:100px;
	right:5px;
	bottom:5px;
	z-index:110;
	background:#a1a1a1;
	border:
	1px
	solid
	#000000;
}
 
</style>
 
<div id="barreflottante" style="visibility:visible;">
	<div style="margin-top:20px;margin-left:14px;">
Nouvelles alertes enregistrées
	</div>
	<br/><input id="bouton" type="button" style="margin-left:175px;" onclick="maFonction()" value="Fermer">
</div>

Le CSS est bien pris en compte, ca pas de soucis, mais le <script> lui, rien n'y fait. J'ai beau cliqué sur le bouton 'Fermer', l'évènement "onClick" ne produit rien. Alors que la fonction maFonction() est la plus simple possible.

Alors ce qui est étrange, ce que j'ai testé, c'est que si je mets :

Code :

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

<input id="bouton" type="button" style="margin-left:175px;" onclick="javascript:alert('Ok')" value="Fermer">

donc avec l'alerte directement dans l'évènement, ca fonctionne. Donc je ne comprend pas pourquoi l'autre cas ne fonctionne pas.

**bee37** · 01/08/2013, 10h47

Bon bah j'ai essayé ca :

Code :

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

<input id="bouton" type="button" style="margin-left:175px;" onclick="javascript:document.getElementById('barreflottante').style.visibility = 'hidden'" value="Fermer">

Et ca fonctionne très bien. Mon bouton ferme bien ma div. Enfin la cache quoi... ce que je voulais au début. Mais du coup je comprend rien.

Pourquoi il prend en compte le script directement inclus dans l'évènement, alors qu'il ne le prend pas, si j'appelle une fonction?

J'ai résolu mon problème, mais j'avoue que si vous avez la réponse à cette dernière question, je serais très intéressé de savoir

Invité · 01/08/2013, 10h55

Malheureusement, j'arrive à la même conclusion...

A croire que les function ne sont pas évaluées... (?) re-

**bee37** · 01/08/2013, 11h00

Ah ^^ haha, j'avoue que c'est quand même très étrange tout ca. Mais merci quand même de votre aide, j'ai pu trouver une solution

Je vais noté le sujet comme résolu, et si jamais vous avez des informations sur pourquoi les fonctions ne sont pas prises en compte, je serais intéressé de savoir pourquoi

Encore merci pour avoir pris du temps pour moi,

Je vous souhaite une bonne journée, (et de bonnes vacances d'ailleurs si vous êtes en vacances ^^), et à une prochaine fois peut être.

Cordialement,

Bertrand

Invité · 01/08/2013, 11h14

Comme je l'ai dit précédemment, il suffit de mettre TOUTES les fonctions dans page1.php.

**bee37** · 01/08/2013, 11h18

Oui c'est vrai, ca reste surement la meilleure solution d'ailleurs. Parce que mettre le code directement dans l'évènement, je pense qu'on doit être limité assez rapidement.

[AJAX] Du javascript dans Ajax

AJAX

Discussions similaires

Partager

Partager