Discussion :

[baedal]

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 :

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

1
2
 
<a href="#" onclick="request('presentation.php?section=coordonnees','contenu');return(false)"  >Coordonn&eacute;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 :

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
 
// 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

[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 :

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

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

[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

[madevilts]

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

Code :

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

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

Il te faut isoler ton script donc tu fais :

Code :

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

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.

[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 ?

[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 :

<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 ?

[madevilts]

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();

[baedal]

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 :

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
 
<?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 :

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
 
<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 :

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

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

[madevilts]

Excuse moi de poser cette question mais... qu'est ce qui ne fonctionne pas précisemment et quand ?

[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 :

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

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 :

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

<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.

[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.