Navigation AJAX / Exécution scripts dans le div chargé

Version imprimable

Bonjour,

Comme vous l'avez deviné, je me permets de poster car je suis dans une galère totale, cela dépasse carrément mes compétences n'étant pas du tout programmeur. J'ai pour habitude de trouver la solution seul (google est mon ami) mais là, j'arrive dans une impasse.
Je conçois mon site pour une nouvelle activité, photographique (studio-galaxy.com)
Mon site est composé de page html.
J'utilise un script de "wajaxisation" utilisant jquery et n'empêchant pas la navigation en cas de javascript non disponible sur le navigateur (et pour le référencement).

Ce dernier marche à la perfection (super effet de transition, etc..), mais comme vous l'avez deviné,
tout script contenu dans le div rechargé appelé par ce script est tout simplement ignoré.
En l'occurrence, là ca me pose problème car je voudrais appeler, par exemple, la page "galerie.html" contenant une galerie utilisant (encore) jquery mais je suis incapable de la faire fonctionner. (sauf évidement lorsqu'on charge directement cette page sans appel AJAX).

Après maintes recherches, j'ai tout à fait compris que c'est parfaitement normal que le script ne soit pas évalué et qu'il y beaucoup de solution pour pallier à ce problème, mais malgré tout cela, je galère depuis des semaines pour réussir à intégrer une de ces solutions (eval, .live, .livequery, "eval global", eval manuel, etc..). Et pourtant j'en ai parcouru un sacré tas ! Et j'ai bien compris aussi que c'est un problèmes très classique. Mais j'y comprends vraiment rien, pardonnez-moi !
C'est un peu comme si un boulanger essayait de créer une fission atomique ;-)
(mon domaine c'est plutôt les systèmes et réseaux)

Veuillez m'excuser par avance des erreurs de termes techniques que je pourrais vous faire subir ;-)

Toute aide sera grandement apprécié, espérant qu'une âme charitable s'intéressera à mon cas,

Merci,
Zouk !

Le script de navigation AJAX ci-dessous (certaines lignes en commentaire sont les restes des tests que j'ai effectué)
Je peux évidemment fournir tout autre source nécessaire à la compréhension du tout.
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 67 68 /** * Navigation Ajax - <a href="http://www.webinventif.fr/navigation-sans-rechargement-de-page-via-javascript-jquery/" target="_blank">http://www.webinventif.fr/navigation...script-jquery/</a> * * Copyright (c) 2008 Julien Chauvin (webinventif.fr) * Licensed under the Creative Commons License: * <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">http://creativecommons.org/licenses/by/3.0/</a> * * Date: 2008-03-13 */ /* Fonction chargement ajax avec animation, * vous pouvez modifier la vitesse (slow, fast, 1500, ...) * et l'effet (slideUp, fadeOut, ...) */ function ajax_page_advanced(ele,msg,url){ $(ele).fadeOut("slow", function(){ $(ele).html(msg).show("slow", function(){ $(ele).load(url+" "+ele, null, function(){ var tampon = $(ele).html(); $(ele).html(msg).hide("slow",function(){ $(ele).html(tampon); $(ele).fadeIn("slow"); }); }); }); }); } /* Fonction de chargement ajax simple */ function ajax_page(ele,msg,url){ $(ele).html(msg).load(url+" "+ele); } /* Fonction de chargement ajax simple, mais avec un delai pour la demo */ function ajax_page_delayed(ele,msg,url){ $(ele).html(msg); setTimeout(function(){ $(ele).load(url+" "+ele); }, 1500) } /* Une fois la page chargée */ $(document).ready(function(){ //Application du chargement ajax avec animation sur les liens ayant une classe "wajax" $('#menu a').click (function() { //$('#menu a').live ('click', function() { //$('#menu a').livequery('click', function() { // ajax_page_advanced('#contenu','<p style="text-align: center">Chargement...</p>',this.href); ajax_page_advanced('#contenu','<div id="loading"><p>Chargement...</p></div>',this.href); return false; } ); //Application du chargemetn ajax simple sur tous les liens se trouvant dans le conteneur "menu1" // $("#menu1 a").click(function(){ // ajax_page_delayed('#swithcontenu','<p style="text-align: center">Chargement ...</p>',this.href); // return false; // }); });

Bonjour.

Si j'ai bien compris la question...

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#parent {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		function ajax_page_advanced(ele, msg, url){
			$(ele).fadeOut("slow", function(){
				$(ele).html(msg).show("slow", function(){
					$(ele).load(url+" "+ele, null, function(){
						var tampon = $(ele).html();
						$(ele).html(msg).hide("slow",function(){
							$(ele).html(tampon);
							$(ele).fadeIn("slow");
 
							// On se retrouve avec un doublon d'id ele
							$(ele)[0].id = $(ele)[0].id + "Parent";
						});
					});
				});
 
			});
		}
 
		$(function(){
			$('#menu a').click(function(){
				ajax_page_advanced('#conteneur', 'Opération en cours', $(this).attr("href"));
 
				return false;
			});
		});
	</script>
</head>
<body>
	<div id="parent">
		<div id="menu">
			<a href="exemple.html">Menu UL</a>
		</div>
		<div id="conteneur">
			<p>
				Un mot pour remplir.
			</p>
		</div>
	</div>
</body>
</html>

Fichier exemple.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Exemple</title>
</head>
<body>
	<div id="conteneur">
		<p>
			Praesent egestas, ante sed sagittis fermentum, ligula nulla viverra tortor, at lacinia massa felis quis arcu. Mauris malesuada neque. Maecenas sed justo. Aliquam dui libero, consectetur at, iaculis eu, aliquam vitae, eros. Nullam lorem felis, iaculis eget, tincidunt eget, mollis ac, arcu. In pellentesque mauris eget quam. In non magna. Maecenas vulputate eleifend purus. Sed imperdiet malesuada augue. Sed dolor purus, faucibus non, elementum feugiat, condimentum et, elit. Vestibulum vitae felis.
		</p>
		<p>
			Sed porta. Sed non magna. Suspendisse ullamcorper pretium enim. Fusce iaculis vulputate lacus. Nulla facilisi. Etiam tincidunt dui ut erat. Donec non est. Maecenas sagittis, sem vitae dictum hendrerit, mi tellus ornare dolor, in euismod sapien diam a ante. Donec ullamcorper mollis lacus. Morbi sed arcu. Curabitur nec purus. Proin ut mauris. Quisque orci. Phasellus enim felis, faucibus in, placerat et, sagittis id, tellus. In eu sapien.
		</p>
		<p>
			Nam volutpat, felis vitae tempus malesuada, arcu mauris lobortis lorem, non pretium dui diam eu augue. Curabitur non nisi sed libero posuere feugiat. Vivamus luctus tristique nisl. Proin vel lectus. Nunc vitae leo eget arcu ultrices pretium. Integer cursus nisi. Nulla quis justo quis nibh hendrerit vulputate. Nam tristique, diam in egestas ullamcorper, sapien quam faucibus leo, id vehicula eros arcu id mi. Morbi neque justo, tempus in, luctus id, mattis sed, metus. Praesent tincidunt risus id lacus. Quisque vitae dolor. Morbi dignissim nibh nec elit. Morbi pulvinar ligula non velit. In hac habitasse platea dictumst. Etiam ornare tristique nibh. Donec consequat, ipsum id luctus commodo, ipsum lacus accumsan eros, ut viverra justo risus at justo. In turpis felis, mollis nec, bibendum ut, vehicula ac, velit. Donec pulvinar eleifend ligula. In tempor eros quis diam tincidunt fermentum. Fusce gravida ultricies metus.
		</p>
	</div>
</body>
</html>

02/07/2010, 15h34
zoukzouk

Bonjour,

Merci d'avoir pris le temps d'apporter une réponse à mon cas, c'est très aimable.
Malheureusement, je crois que nous nous somme pas compris (ou bien c'est moi qui est mal utilisé la réponse ;))
Je vais essayer d'être plus clair en reprenant ton exemple :

Comment faire pour que les balises <script> qui se trouveront dans le div "conteneur" du fichier "exemple.html" soit évalué/exécuté lorsqu'on les charges via le script jquery ?

En espérant avoir été plus claire, merci.
02/07/2010, 23h58
danielhagnoul

Bonsoir.

Citation:

Envoyé par zoukzouk

Comment faire pour que les balises <script> qui se trouveront dans le div "conteneur" du fichier "exemple.html" soit évalué/exécuté lorsqu'on les charges via le script jquery ?

Aucun script se trouvant dans la division conteneur du fichier exemple ne sera jamais chargé ! Les fonctions utilisées ne chargent que du HTML.

Pour charger un script et l'exécuter, voir : http://api.jquery.com/jQuery.getScript/