Sous IE - Impossible de récupérer un bloc avec id dans un autre fichier (appel avec load() )

**DeadLine** · 26/05/2010, 15h09

Bonjour, petit problème sous IE alors que tout fonctionne sous FF, Chrome et Safari...

Sur la page principale de mon site, je cherche à modifier le contenu d'un bloc avec des effets de slide. Pour cela, je vais récupérer dans un autre fichier html et grace à la fonction load(), le nouveau contenu de mon bloc.

Ce nouveau contenu sera choisi parmi plusieurs blocs.

Je m'explique :

J'ai 7 images identifiées de "a" à "g", contenues dans une div d'id "work" :

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
<div id='work'>
					<div id='ajax_content'>
						<a id='_nosRealisations'>
						<h1>REF</h1>
						<div id='images_container'>
							<div class='image'  style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='a'><img src='image.png' id='1' title='16'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='b'><img src='image.png' id='2' title='Photos'/></a>
							</div>
							<div class='image'  style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='c'><img src='image.png'  id='3' title='London'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='d'><img src='image.png' id='4' title='Camp'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='e'><img src='image.png' id='5' title='Portfolio'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='f'><img src='image.png' id='6' title='Porter'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='g'><img src='image.png' id='7' title=' ITN'/></a>
							</div>
						</div>
 
					</div>
					<div class='top_link'><a  href='#top'>haut de page</a></div>
				</div>

Lors d'un clic sur une de ces images, je récupère l'identifiant du lien <a></a> qui l'entoure puis j'exécute ma fonction ajax_page (voir les lignes en rouge, le reste n'importe pas):

Code :

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

1
2
3
4
5
6
$(".image a").live("click",function(){
        		var identifiant = jQuery(this).attr("id");
        		jQuery("#main_navi a").addClass("new_nav");
                ajax_page("#work > #"+identifiant+"","references_personnalisees.html");
                alert(identifiant);
                return false;

Voici le code la fonction ajax_page :

Code :

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

1
2
3
4
5
6
7
8
9
function ajax_page(ele,url){
		        $("#work").slideUp("slow", function(){
		                        $("#work").load(url+" "+ele, null, function(){
		                                var tampon = $(ele).html();
		                                $("#work").html(tampon);
		                                $("#work").slideDown("slow");  
		                        });
		        });
		}

Et voici le fichier references_personnalisees dans lequel je dois récupérer les blocs d'id "a" ; "b" ; "c" ..... selon l'id de l'image cliquée...

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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<section id='content'>		
				<div id='work'>
					<div id="a">
						<a id='_nosRealisations'>
						<h1>EGAL 16</h1>
						<img class='screen' src='screen/Egal.png'>
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id="b">
						<a id='_nosRealisations'>
						<h1>Galibert Photographie</h1>
						<img class='screen' src='screen/Galibert.png'>
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id="c">
						<a id='_nosRealisations'>
						<h1>Su London maroquinerie</h1>
						<img class='screen' src='screen/SuLondon.png'>
						<img class='screen' src='screen/SuLondon3.png'>
						<img class='screen' src='screen/SuLondon2.png'>
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id="d">
						<a id='_nosRealisations'>
						<h1>Camping Bon Port</h1>
						<img class='screen' src='screen/CampingBonPort.png'>
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id="e">
						<a id='_nosRealisations'>
						<h1>Ian Berry Portfolio</h1>
						<img class='screen' src='screen/IanBerry2.png'>
						<img class='screen' src='screen/IanBerry4.png'>
						<img class='screen' src='screen/IanBerry3.png'>
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id="f">
						<a id='_nosRealisations'>
						<h1>Poopoopidoo pret a porter feminin</h1>
						<img class='screen' src='screen/Poopoopidoo.png'>
						<img class='screen' src='screen/Poopoopidoo2.png'>
						<img class='screen' src='screen/Poopoopidoo3.png'>
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id="g">
						<a id='_nosRealisations'>
						<h1>Biocor ITN</h1>
						<img class='screen' src='screen/Biocor.png'>
						<img class='screen' src='screen/Biocor3.png'>
						<img class='screen' src='screen/Biocor2.png'>				
						<div class='screen'>
						</div>
						<h1>Description</h1>
						<ul id='list_description'>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
							<li>blabla</li>
						</ul>
					</div>
					<div id='ajax_content'>
						<a id='_nosRealisations'>
						<h1>REFs</h1>
						<div id='images_container'>
							<div class='image'  style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='a'><img src=image.png' id='1' title='Egal 16'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='b'><img src='image.png' id='2' title='Photos'/></a>
							</div>
							<div class='image'  style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='c'><img src='image.png'  id='3' title='London'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='d'><img src='image.png' id='4' title='Camp'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='e'><img src='image.png' id='5' title='Portfolio'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='f'><img src='image.png' id='6' title='Porter'/></a>
							</div>
							<div class='image' style='background:url(image.png);'>
								<a href='references_personnalisees.html' id='g'><img src='image.png' id='7' title='ITN'/></a>
							</div>
						</div>
					</div>
				</div>
			</section>

Sous IE 7 et 8 le problème est donc que lorsque je clique sur l'image 1 identifiée par id="a" je récupère bien le code html correspondant dans le fichier references_personnalisees.html --> le bloc <div id="a">.......</div> et la fonction html() est bien exécutée. Sauf que pour les autres images, je récupère bien l'identifiant de l'image, en revanche lorsque mon script va chercher le bloc d'id identique dans mon autre fichier, il ne le trouve pas, ma variable qui récupère est à null ...

Le nouveau contenu n'est donc pas chargé !

Je ne comprends vraiment pas... sous FF, Chrome et Safari, je n'ai aucun souci. Si quelqu'un a une idée... cela m'aiderait énormément.

Merci d'avance !

**DeadLine** · 26/05/2010, 15h48

Bien, il a suffit que je poste pour penser à un truc ... et c'est bon, ça fonctionne.

Pour ceux que ça interresse :

J'utilisais "#work > #"+identifiant+"" comme selecteur en paramètre de ma fonction ajax. Ce qui est bien interprété par les autres navigateurs.
Je me suis rendue compte que je n'avais pas besoin de tant de précision au niveau de la selection.

"#"+identifiant+"" suffisait largement, pas besoin de préciser le parent. Et IE le comprend, ainsi que tous les autres !

Bon après je trouve ça louche qu'il ne comprenne pas le child selector "parent > enfant".

Même si mon travail fonctionne maintenant, si quelqu'un a une explication à cette différence entre IE et les autres, n'hésitez pas.

**danielhagnoul** · 27/05/2010, 00h37

Bonsoir.

Un ID doit être unique, donc pas besoin de sélecteur parent > enfant.

Un petit cafouillage dans les """, si le reste est correct, il suffirait normalement de :

Code :

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

1
2
3
4
5
6
7
8
9
ajax_page(this.id, "references_personnalisees.html");
 
function ajax_page(ele, url){
	$("#work").slideUp("slow", function(){
		$(this).load(url+"#"+ele, function(){
			$(this).html($("#"+ele).html()).slideDown("slow");
		});
	});
}

IE8 est beaucoup moins laxiste que les autres navigateurs.

Sous IE - Impossible de récupérer un bloc avec id dans un autre fichier (appel avec load() )

jQuery

Discussions similaires

Partager

Partager