[AJAX] Appel d'une fonction javascript dans une page chargée en ajax

Version imprimable

Bonjour a tous,
je suis en train de creer un site qui utilise ajax afin de charger certaines pages.
Je m'explique, j'ai un menu, réparti en catégories, et la page principal de chaque catégories présente des sous menus.
Les pages des sous menus sont alors appelées via une méthode ajax, de la manière suivante :
Code:

1 2 <a href="#" onclick="request('presentation.php?section=coordonnees','contenu');return(false)" >Coordonnées</a></li>
les pages des sous catégories sont donc chargées dans une div (que j'ai appelée contenu).
Le problème est que j'utilise des fonctions javascript à l'intérieur des pages appellées en ajax.
La page "mère" (qui contient la div contenu) appelle bien ces fonctions dans le header et ces fonctions fonctionnent, mais dés que l'on charge un page avec javascript, la premiere fois qu'on utilisera une fonction javascript elle ne marchera pas.

Voici le code pour charger les pages dans une div :
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 // Permet de ne rafraichir que le contenu d'une div et non toute la page function request(url,cadre) { var XHR = null; if(window.XMLHttpRequest) // Firefox XHR = new XMLHttpRequest(); else if(window.ActiveXObject) // Internet Explorer XHR = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } // envoie de la requête, methode GET et de l'url XHR.open("GET",url, true); // on guette les changements d'état de l'objet XHR.onreadystatechange = function attente() { // l'état est à 4, requête reçu ! if(XHR.readyState == 4) { // ecriture de la réponse document.getElementById(cadre).innerHTML = XHR.responseText; } } XHR.send(null); // le travail est terminé return; }
Savez-vous de quoi ça vient ?
Merci beaucoup

15/04/2008, 15h42
madevilts

Lorsque tu utilises le HTTPrequest, il te renvoit les données Ajax dans xhr.responseText. Jusque là tout va bien.
Lorsque tu fais :

Code:

document.getElementById(cadre).innerHTML = XHR.responseText;

Tu lui dis de stocker le texte (ou html) dans ta page... et c'est tout !

Nullepart tu lui spécifie qu'il faudrait évaluer du code javascript dans ce retour ajax.
Lors du chargement d'une page standard, ton navigateur évalue le code entre <script> et </script> mais dans le cas d'un ajax, ça n'est pas le cas.
J'ai déjà eu le meme type de problème que toi. je lance mon ajax puis je découpe le xhr.responseText, je récupére le code qu'il y a entre <script> et </script>. Pour finir, je fais un eval() dessus ;)
15/04/2008, 15h50
baedal

tout d'abord merci de m'avoir repondu :)
Donc il faudrait que je recupere ce qu'il y a à l'interieur des balises script de la page chargée via ajax c'est bien ça ?
Mais est ce qu'il ne va pas y avoir un probleme de chemin si la page chargée et la page "mere" ne sont pas dans le même repertoire ?
Sinon pourriez-vous m'expliquer comment faire pour executer les fonctions au sein des pages chargées en ajax s'il vous plait ?

Pour information, dans la page chargée en question, je voudrais afficher une galerie avec "FancyZoom" =)

je debute, merci pour votre aide

Imaginons que ton xhr.responseText vaut ceci (il faut commencer par simple) :

Code:

<script>alert('coucou'); </script> <div>Mon code html de ma page</div>

Il te faut isoler ton script donc tu fais :
Code:

1 2 3 4 5 6 7 8 9 10 11 var codejs = xhr.responseText; codejs = codejs.substr(codejs.lastIndexOf('<script>')+8,codejs.lastIndexOf('</script>')); alert('mon beau code js (pour controler) = '+codejs); try { eval(codejs); } catch(exc) { alert('eval ne marche pas'); }
Voila si je n'ai pas fait d'erreur ça doit marcher. ;)

15/04/2008, 16h18
baedal

pardon, je suis très chiant :/ mais si, dans la page chargée par ajax, entre les balises scripts, ce sont les liens vers les fichiers contenant les fonctions js et non pas des fonctions "tapées entièrement" comme dans votre exemple, comment puis-je faire ?
15/04/2008, 16h20
baedal

En fait je me rends compte d'un problème, pour utiliser ma galerie (dans une page chargée via ajax), je dois placé une fonctions dans la balise body, comme ceci :

Citation:

<body onload="setupZoom()">

est ce que ce n'est pas "sale" de chargée dans le body de la page "mère" une page avec encore un autre body ? :(
15/04/2008, 16h35
madevilts

Citation:

Envoyé par baedal

En fait je me rends compte d'un problème, pour utiliser ma galerie (dans une page chargée via ajax), je dois placé une fonctions dans la balise body, comme ceci :
est ce que ce n'est pas "sale" de chargée dans le body de la page "mère" une page avec encore un autre body ? :(

Ce n'est pas propre et de toute manière, l'évènement onload ne sera pas interprété.

Le mieux :
Tu inclus TOUT tes javascripts dans ta page principal. Du fait, quand tu chargeras tes ajax, tes fonctions seront déjà chargées. Lorsque tu charges ta page ajax, tu charges le setupZoom();

Alors ce que j'ai fait =) :
dans la page "mere" jai inclus les appels de fichiers avec les fonctions javascripts (et j'ai meme mis une image pour tester ma galerie dans cette page, ca fonctionn).
Mais lorsque je veux faire fonctionner ma galerie dans une page qui est chargée en ajax, cela ne fonctionne toujours pas.

Pour mieux m'expliquer et expliquer comment fonctionne le site :
une page index charge les themes du menus :

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
 
<?php
        include('header.php');
?>
	<script type="text/javascript" src="../../javascript/FancyZoom.js"></script>
    <script type="text/javascript" src="../../javascript/FancyZoomHTML.js"></script>
</head>
<body onload="setupZoom()">
		<div id="page">
			<div id="menu_haut">
				<?php include('menu_haut.php'); ?>
			</div>
			<div id="contenu">
				<?php  
                                        switch($_GET['page']){
                                                case "presentation":
                                                        include("presentation.php");
                                                        break;
                                                case "projets":
                                                        include("projets.php");
                                                        break;
                                                case "b2b":
                                                        include("b2b.php");
                                                        break;
                                                case "edito":
                                                        include("edito.php");
                                                        break;
                                                case "contact":
                                                        include("contact.php");
                                                        break;
                                                case "credits":
                                                        include("credits.php");
                                                        break;
                                                case "error404":
                                                        include("error404.php");
                                                        break;  
                                                default:
                                                        include("presentation.php");
                                                        break;                                                                                                                          
                                        }   
                                ?>
 
			</div>
			<div id="credits" align="center"><a href="<?php echo $_GET['lang']."_credits";?>">cr&eacute;dits - mentions l&eacute;gales</a></div>
		</div>		
		<p style="text-align: center"><a href="http://blog.calii.fr/wp-content/uploads/2008/03/calii.jpg" title="calii.jpg"><img src="http://blog.calii.fr/wp-content/uploads/2008/03/calii.thumbnail.jpg" alt="calii.jpg" /></a></p>
 
	</body>
</html>

C'est dans cette page que j'ai placé les appels (d'ou le bout /head parceque j'ai donc laissé ouverte la balise dans le header)

Ensuite les pages themes, ici la page presentation.php, qui via ajax, appellera pages_agence/agence_presentation2.php, qui, elle contiendra la galerie

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
 
<div id="contenu_haut">
	<div id="navcontainer">
		<li <?php if ($_GET['section'] == "presentation" OR !isset($_GET['section']) ){ echo 'id="active"'; } ?> ><a href="#" onclick="request('presentation.php?lang=<?php echo $_GET['lang'];?>&section=presentation','contenu');return(false)" <?php if ($_GET['section'] == "presentation" ){ echo 'id="current"'; } ?> >Pr&eacute;sentation</a></li>
		<li <?php if ($_GET['section'] == "coordonnees" ){ echo 'id="active"'; } ?> ><a href="#" onclick="request('presentation.php?lang=<?php echo $_GET['lang'];?>&section=coordonnees','contenu');return(false)" <?php if ($_GET['section'] == "coordonnees" ){ echo 'id="current"'; } ?> >Coordonn&eacute;es</a></li>
	</div>
</div>
<div id="contenu_bas">
	<?php 
		switch($_GET['section']){
			case "":
				include("../../pages_agence/agence_presentation2.php");
				break;
			case "presentation":
				include("../../pages_agence/agence_presentation2.php");
				break;
			case "coordonnees":
				include("../../pages_agence/agence_coordonnees.php");
				break;
			case "login":
				include("../../testForm/form.php");
				break;				
			default:
				include("error404.php");
				break;																																		
		}   
	?>
</div>

Et enfin la page agence_presentation2.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
        switch($_GET['lang']){  
                case "fr":
                        echo '<b>l\'Architecture, la conception d\'objet d\'int&eacute;rieur, le mobilier urbain, et l\'Urbanisme.</b>';
                        break;
                case "uk":
                        echo 'presentation uk';
                        break;
                case "es":
                        echo 'presentation es';
                        break;                                          
        }
?>
<p style="text-align: center"><a href="http://blog.calii.fr/wp-content/uploads/2008/03/calii.jpg" title="calii.jpg"><img src="http://blog.calii.fr/wp-content/uploads/2008/03/calii.thumbnail.jpg" alt="calii.jpg" /></a></p>

Voila, je suis vraiment desolé de 'balancer' autant de code, mais c'est que la façon dont est construite le site n'est pas des plus simples et je ne m'exprime pas toujours tres bien, donc c'est pour etre sur d'etre bien compris. merci

16/04/2008, 10h00
madevilts

Excuse moi de poser cette question mais... qu'est ce qui ne fonctionne pas précisemment et quand ?
17/04/2008, 17h00
salmoucha

Salut,
moi aussi j'ai rencontré un problème avec les fonctions JS et Ajax.
Mais j'ai découvert que:

1) Les fonctions JS appelées pendant (onLoad) ne s'exécutent pas. Mais les fonctions appelées après un évènement fonctionne normalement.

2) En faisant les testes sur les champs (remplis, vide, ....)
comme:

Code:

document.formdoc.code_lot.value = 'salut';

ne marche pas.

Et je croit que c logique ça.
Car, surtout sous Internet Explorer qui est très sensible. et diffère entre les forms. Même si tu affiche le code source de ta page principale, tu trouvera un seul <form ...> contenant le nom de ta page principale et pour la page affichée en Ajax, c'est juste un

Code:

<div id="..."></div>

seulement. Donc, le système ne connait pas notre champs (code_lot) et son form (formdoc).
C'est pour ça, j'ai fait des testes php pour les champs car je n'ai pas trouvé de solution pour ce problème. :roll:
17/04/2008, 17h03
salmoucha

j'espère que mon explication était claire pour toi.
Mais, je pense que ce problème n'est présent qu'en utilisant IExplorer.