Zur Navigation

masonry funzt nicht mit ajax

1 andehrl

hallo zusammen und schöne weihnachten,

ich habe eine xml-datei via php erzeugt und mittels ajax in eine datei eingelesen.
jetzt wollte ich noch masonry anfügen damit das ganze bei neuaufbau optisch reizvoller wird.
hab verschiedes versucht und bin leider nicht zum gewünschten ergebnis gelangt. masonry wird nicht angesprochen.

mein letzter versuch schaut so aus:



		function ladeDaten(country){
		
		   $.ajax({
					url      : 'proxy4.php', 
					dataType : 'xml',
					
					data: 'land=' + country, 
					type: 'POST',            
					
					success  : function(daten) {
						var html='';
						$(daten).find('item').each(function(){
							html += '<div class="tem">' + $(this).find('description').text() + '</div>';
						});

						$(function(){
						  $('#inhalt').html(html).masonry({
							
							itemSelector : '.tem',
							columnWidth : 100,
							isAnimated: true,
						  });
						});


						
					}
					
				});
		
		
		}


...

<div id="inhalt"></div>

25.12.2012 16:36

2 Jörg

Ich würde html() und masonry() nacheinander ausführen:

$(function(){
  $('#inhalt').html(html);
  $('#inhalt').masonry({
    itemSelector: '.tem',
    columnWidth: 100,
    isAnimated: true,
  }); 
});

25.12.2012 18:14

3 andehrl

habs deinem vorschlag entsprechen versucht. die inhalte werden eingelesen, masonry will aber nicht.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		
		<title>Javascript</title>
		
		<style type="text/css">
		

		
		.tem{
		margin: 10px;
                width: 130px;
		float: left;
		}

		
		
		</style>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.masonry.min.js"></script>
		<script type="text/javascript">
		
		
		function ladeDaten(country){
		
		   $.ajax({
					url      : 'proxy4.php', 
					dataType : 'xml',
					
					data: 'land=' + country, 
					type: 'POST',
					
					success  : function(daten) {
						var html='';
						$(daten).find('item').each(function(){
							html += '<div class="tem"><img src="galerie/' + $(this).find('description').text() + '" width="130"></div>';
						});

						$(function(){
						  $('#inhalt').html(html);
						  $('#inhalt').masonry({
							
							itemSelector : '.tem',
							columnWidth : 150,
							isAnimated: true
						  });
						});


						
					}
					
				});
		
		
		}



...


<div id="inhalt"></div>





25.12.2012 23:33

4 Jörg

Aus dem Codeausschnitt ist nicht ersichtlich, wie ladeDaten() getriggert wird: bis einschließlich $('#inhalt').html(html); funktioniert das Script wie gewünscht?

Gibt die JavaScript-Konsole irgendeinen Fehler aus?

Funktioniert masonry() denn für sich genommen, d.h. bei einem div#inhalt, welches die Kindelemente schon im HTML-Code enthält?

27.12.2012 11:17 | geändert: 27.12.2012 11:17

5 andehrl

Zitat von Jörg
Aus dem Codeausschnitt ist nicht ersichtlich, wie ladeDaten() getriggert wird: bis einschließlich $('#inhalt').html(html); funktioniert das Script wie gewünscht?

ladeDaten() wird in diesem abschnitt getriggert und die entsprechenden bilder werden auf der seite dargestellt. bis $('#inhalt').html(html); funktioniert das script also.


$(document).ready( function(){ 
			
				ladeDaten('Germany');
				
				$('#it').click(function(){
				  ladeDaten('Italy');
				});
				
				$('#de').click(function(){
				  ladeDaten('Germany');
				});
				
				$('#nl').click(function(){
				  ladeDaten('Netherlands');
				});
			
			});
			
			
			function selbox() {
				var land = document.getElementById('sel').value;
				ladeDaten(land);
			}





Gibt die JavaScript-Konsole irgendeinen Fehler aus?

firebug zeigt keine fehler an





Funktioniert masonry() denn für sich genommen, d.h. bei einem div#inhalt, welches die Kindelemente schon im HTML-Code enthält?

ich habe masonry in einer anderen datei ausprobiert in der die kindelemente direkt im html-code enthalten sind. das funktioniert gut.
diese probeseite schaut so aus:


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script type="text/javascript">

$(function(){
  $('#container').masonry({
	position: 'relative',
        itemSelector : '.item',
        columnWidth : 200,
	isAnimated: true,
	isResizable: true,
	  animationOptions: {
            duration: 850,
            easing: 'linear',
            queue: false
          }

  });
});

</script>
</head>

<body>

<div id="cont"></div>

<div id="container">
	<div class="item"><img src="galerie/amex_diba.jpg" width="180"></div>
	<div class="item"><img src="galerie/amex_leibgericht.jpg" width="180"></div>
	<div class="item"><img src="galerie/Delphine.jpg" width="180"></div>
	<div class="item"><img src="galerie/amex_iaa.jpg" width="180"></div>
	<div class="item"><img src="galerie/amex_points_to_pay_bills.jpg" width="180"></div>
	<div class="item"><img src="galerie/amex_ratsch_und_weg.jpg" width="180"></div>
	<div class="item"><img src="galerie/amex_weltkarte.jpg" width="180"></div>
	<div class="item"><img src="galerie/bmw_carbon.jpg" width="180"></div>
	<div class="item"><img src="galerie/bmw_gold.jpg" width="180"></div>
	<div class="item"><img src="galerie/david_garret.jpg" width="180"></div>


</div>
<div id="contbottom"></div>

</body>
</html>


27.12.2012 17:05

6 Jörg

Noch eine Idee: vielleicht hilft eine kleine Pause dazwischen:

$(function(){
  $('#inhalt').html(html).delay(500).masonry({
    itemSelector: '.tem',
    columnWidth: 100,
    isAnimated: true
  }); 
});

27.12.2012 20:34

7 andehrl

macht leider keinen unterschied.

27.12.2012 21:51

8 andehrl

beim ersten aufruf der seite funktioniert masonry jetzt. hab die änderung im script fett markiert.
wenn ich allerdins zb durch die select-box andere werte übergebe werden zwar die entsprechenden bilder ausgegeben, masonry aber wieder nicht ausgeführt???





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		
		<title>Javascript</title>
		
		<style type="text/css">
		
        #oben{
		height: 240px;
		background-color: #9C6;

		}
		
		#inhalt, #obenin{
		width: 65%;
		min-width: 400px;
		margin-left: auto;
		margin-right: auto;
		}

		.tem{
				
		width: 130px;
		float: left;
		margin: 10px;
		}
		
		#unten{
		height: 10px;
		background-color: #9C6;
		}

		
		
		</style>
		
		<!-- Einbinden über CDN (Content Delivery Network)  -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
		<script type="text/javascript">
		
		
		
		
		function ladeDaten(bilder){
		
		   $.ajax({
					url      : 'straightxml.php', 
					dataType : 'xml',
					
					data: 'projekt=' + bilder, 
					type: 'POST',
					
					success  : function(daten) {
						var html='';
						$(daten).find('item').each(function(){
							html += '<div class="tem"><img src="galerie/' + $(this).find('bilder').text() + '" width="130"></div>';
						});

						$('#inhalt').html(html);
						
						$(function(){
						  $('#inhalt').masonry({
							// options
							position: 'relative',
							itemSelector : '.tem',
							columnWidth : 150,
							isAnimated: true,
							//isFitWidth: true,
							animationOptions: {
							duration: 850,
							easing: 'linear',
							queue: true
						  }

						  });
						});


						
					}
					
				});
		
		
		}
		
	
			$(document).ready( function(){ 
			
				ladeDaten('Netherlands');
				
				$('#it').click(function(){
				  ladeDaten('Italy');
				});
				
				$('#de').click(function(){
				  ladeDaten('Germany');
				});
				
				$('#nl').click(function(){
				  ladeDaten('Netherlands');				  				  			  
				});
				
			
			});
			
			
			function selbox() {
				var land = document.getElementById('sel').value;
				ladeDaten(land);
			}
			
			
		
		</script>
		
		
		
	</head>
	
	<body>
		<div id="oben">
			<div id="obenin">
				<div onclick="ladeDaten('Italy');">Italien</div>
				<div onclick="ladeDaten('Germany');">Deutschland</div>
				<div onclick="ladeDaten('Spain');">Spanien</div>
				
				<br/>
				<br/>
				<div id="it">Italien</div>
				<div id="de">Deutschland</div>
				<div id="nl">Holland</div>
				<br/>
				<br/>
				
				
				<select id="sel" onchange="selbox();" >
				<option value="Italy">Italien</option>
				<option value="Germany">Deutschland</option>
				<option value="Netherlands">Holland</option>
				</select>
			</div>
		</div>
		<div id="inhalt"></div>
		<div id="unten"></div>
		
	</body>
	

</html>

28.12.2012 12:48

9 andehrl

da bin ich schon wieder. es scheint jetzt alles so zu funktionieren wie erwartet.
masonry muss wohl gesondert neu geladen werden:


$('#inhalt').masonry('reload');


insgesamt schaut ajax mit masonry also jetzt wie folgt aus:


		function ladeDaten(bilder){
		
		   $.ajax({
					url      : 'straightxml.php', 
					dataType : 'xml',
					async : false,
					
					data: 'projekt=' + bilder, //-------nur die daten werden neu eingelesen
					type: 'POST',            //--------nicht die ganze seite wird neu aufgerufen
					
					success  : function(daten) {
						var html='';
						$(daten).find('item').each(function(){
							html += '<div class="tem"><img src="galerie/' + $(this).find('bilder').text() + '" width="130"></div>';
						});

						$('#inhalt').html(html);
						
						$(function(){
						  $('#inhalt').masonry('reload');
						  $('#inhalt').masonry({
							// options
							position: 'relative',
							itemSelector : '.tem',
							columnWidth : 150,
							isAnimated: true,
							isResizable: true,
							animationOptions: {
							duration: 850,
							easing: 'linear',
							queue: false
						  }

						  });
						});


						
					}
					
				});
		
		
		}
		
	
			$(document).ready( function(){ 
			
				ladeDaten('Netherlands');
				
				$('#it').click(function(){
				  ladeDaten('Italy');
				});
				
				$('#de').click(function(){
				  ladeDaten('Germany');
				});
				
				$('#nl').click(function(){
				  ladeDaten('Netherlands');				  				  			  
				});
				
			
			});
			
			
			function selbox() {
				var bilder = document.getElementById('sel').value;
				ladeDaten(bilder);
			}


vielen dank für die unterstützung :)

28.12.2012 14:50

1 Forenmitglied fand diesen Beitrag gut

10 Jörg

Achso, man muss ihn neu anschubsen. Danke für das Posten der Lösung :)

28.12.2012 15:15

Beitrag schreiben (als Gast)





[BBCode-Hilfe]