Contenu AJAX et .on() et IE

**edward carnby** · 02/09/2013, 09h30

Bonjour à tous !

Grand débutant dans le développement web et encore plus en javascript, je sollicite votre aide pour un problème ...

J'aimerais utiliser le plugin MASONRY (http://masonry.desandro.com/) sur une page que je suis en train (d'essayer au moins

) de créer pour un intranet.

Avec une page statique, pas de problèmes, le plugin fonctionne correctement (firefox et IE 7 et 8, les 2 navigateurs installés sur les postes).

Dès que je veux charger du contenu en AJAX (dans un DIV 'ContainerPrincipal'), ça ne fonctionne plus sous IE

, mais c'est OK sous Firefox.

J'ai essayé de me pencher sur la fonction .on, mais sans résultats ...

Ci-dessous, mon code :

Ma page principale :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PORTAIL_STATISTIQUE</title>
<script src="http://sas:8080/js/Jquery.182.js"></script>
<script src="http://sas:8080/js/JqueryUI.191.js"></script>
<script src="http://sas:8080/js/Portail_V2.js"></script>
<script src="http://sas:8080/js/masonry.pkgd.js"></script>
<link href="http://sas:8080/css/Style_PortailV2.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript"> 
	$(document).ready(function() {
		$("#ContainerPrincipal").load("http://adresse/Accueil.html");
		});
		$(document).on('click','#menu1',function() {
			var lien = "http://adresse/DataMenu1.html"
			$.ajax({
   			type: "POST",
   			url: lien,
   			success: function(data, textStatus, jqXHR) {
				$('#ContainerPrincipal').html(data);	}
				});
			});
</script>
</head>
<body>
<div class="MenuVertical">
	<ul>
     		<li><a href='#' id='menu1'>menu1</a></li>
		<li><a href="#" id='menu2'>menu2</a></li>
		</ul>
</div> 
</div>
<div id="ContainerPrincipal"></div>
</body>
</html>

Le contenu chargé en AJAX :

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
<script type="text/javascript">
	$('#container').masonry({
			columnWidth: 10, 
			animate: true,
			itemSelector: '.item' 
	});
 
</script>
 
<div id="container">
	<div class="item">
    		<div class="titre">Bloc 1  ...</div>
        	<div class="Value">
        		<ul>
				<li>toto</li>
				<li>tata</li>
			</ul>
		</div>
	</div>
 
	<div class="item">
      		<div class="titre">Bloc 2</div>
        	<div class="Value">
        		<ul>
				<li>titi</li>
				<li>tutu</li>
			</ul>
		</div>
	</div>
 
	<div class="item">
		<div class="titre">Bloc 3  ...</div>
    		<div class="Value">
    			<ul>
				<li>tata</li>
				<li>toto</li>
			</ul>
		</div>
	</div>
 
</div>

Après plusieurs heures de recherches, je ne sais plus ou regarder

**SpaceFrog** · 02/09/2013, 10h22

as tu plusieurs id identiques ?

sinon bascule ton script chargé en ajax àprès le code html ...

**danielhagnoul** · 02/09/2013, 10h46

Bonjour

Code :

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

1
2
3
$( "body" ).on( "click", "#menu1", function(){
	$( "#ContainerPrincipal" ).load( "http://adresse/DataMenu1.html" );
});

**edward carnby** · 03/09/2013, 17h26

Bonjour,

Merci à tous les 2 !

Problème résolu ... Sur les conseil d'un collègue, j'ai utilisé une ancienne version du plugin masonry

On commence à voir apparaître des plugins non compatible avec IE 6, 7 ou 8 ??

Contenu AJAX et .on() et IE

jQuery

Vue hybride

Discussions similaires

Partager

Partager