✔ Infinite Scroll externe Javascripts nachladen bei neuen Elemente

[Jonny Cannuccia]

Hallo Zusammen

Hoffe es kann mir jemand Helfen.. bin Nahe der Verzweiflung...

Ich habe auf einer meiner Seiten infinte-scroll integriert.
Funktioniert super!

Problem:
Ich habe in jedem Element, das geladen wird ein Star-Rating eingebaut (Bewertung mittels sterne -> externes JS)
Hier auch der Link zum Script http://www.fyneworks.com/jquery/star-rating/

Funktioniert super für die Elemente die zu beginn gezeigt werden.
Wenn aber infinite-scroll die neuen Elemente darstellt, lädt das star-rating-js script nicht nach.

Ich weiss, dass ich das unter function(arrayOfNewElems) {} einfügen muss...

Habe einiges versucht. z.B. mit .load oder habe versucht die funktionen aufzurufen... hatte aber nur js-Fehler..
Habe selbstverständlich google durchsucht, bestehende Seiten angeschaut, wie die es lösen.. usw...

Ich bin echt am Anschlag.. finde keine Lösung, wie ich das star-rating.js nachladen soll wenn die neuen Elemente dargestellt werden..

Kann mir jemand bitte bitte bitte helfen?
Sorry für die grössere Schriftart. Wollte nur das wesentliche aus dem Text hervorheben.

 

[rennwolle17]

Hallo,

du musst den Aufruf von star-rating in live() auslagern ... dann funktioniert der Javascript Code auch bei nachgeladenen Inhalten.

http://api.jquery.com/live/

Beste Grüße,
Chris

 

[Jonny Cannuccia]

Vielen herzlichen Dank für die schnelle Antwort.
Habe den Link angeschaut muss aber gestehen, dass ich kein sonderlicher JS-Hirsch bin...:-(

Muss ich das nun unter "function(arrayOfNewElems) {}" integrieren oder im Head... verstehe es nicht ganz...

Habs so versucht:

var $newElems = $( arrayOfNewElems ).live('star-rating/jquery.rating.js');

Sorry für die blöden Fragen..

 

[rennwolle17]

Ne so führt das zu keinem erfolg

Wie sieht denn dein aktueller code aus? Wenn ich was seh kann ich besser helfen

 

[Jonny Cannuccia]

Sorry.... und danke für das schnelle Feedback..

So sieht der aktuelle Code aus:

$('#inseratecontainer').infinitescroll({
								
	loading: {
			finishedMsg: 'Keine Inserate mehr...'
	},
								  
 	navSelector  : "#infinite_scroll_menu",
	nextSelector : "#infinite_scroll_menu a.page2",
	itemSelector : ".inserat",
	loadingImg   : "/scripts/common/images/gui/loading.gif",  
	loadingText  : "Ladet weitere Insreate",    
	animate      : true,  
	bufferPx     : 40,/*  */ 
   
   },
 
				////////////////////////////////
				// optional callback when new content is successfully loaded in.
				function(arrayOfNewElems) {
					
					
				////////////////////////////////
							/*
							keyword `this` will refer to the new DOM content that was just added.
							as of 1.5, `this` matches the element you called the plugin on 
							(e.g. #content).
							All the new elements that were found are passed in as an array
							*/
							
	
							
							var $newElems = $( arrayOfNewElems ).css({ opacity: 1 });
							var $newElems = $( arrayOfNewElems ).live('star-rating/jquery.rating.js');
	
				} //////////////////////////////
	);

Und da wo die "Stars" dargestellt werden noch folgender Code:

<script type="text/javascript" language="javascript">
					$(function(){ 
					 $('#form1 :radio.star1').rating(); 
					 $('#form2 :radio.star1').rating({cancel: 'Cancel', cancelValue: '0'}); 
					 $('#form3 :radio.star1').rating(); 
					 $('#form4 :radio.star1').rating(); 
					});
			
					$(function(){
					 $('#inseratecontainer form').submit(function(){
					  $('.test',this).html('');
					  $('input',this).each(function(){
					   if(this.checked) $('.test',this.form).append(''+this.name+': '+this.value+'<br/>');
							});
					  return false;
					 });
					});
</script>

Ich habe das mit dem .live noch drin gelassen.. damit Du sehen kannst, wo man die neuen Elemente ansteuert.
Nochmals vielen Dank für die bisherige Hilfe (und vielleicht weitere Hilfe..)..

 

[rennwolle17]

So ... jetzt bräuchte ich noch einen Link zum anschauen ... um herauszufinden wie es ausgelöst wird ... mouseover, klick, etc?

ahhh ich seh gerade bei infinity scroll ist das anderser ... ich schaue ...

So des Rätsels Lösung

$('#content').infinitescroll({

        navSelector  	: "a#next:last",
        nextSelector 	: "a#next:last",
        itemSelector 	: "#content p",
        dataType	 	: 'html'

    }, function(newElements){

        $('.star').rating();
        
    });

da wo im Code-Beispiel

$('.star').rating();

steht, müsstest du vielleicht nur den Selector ".star" ändern - in meinem Beispiel ist es

<input class="star" type="radio" name="test-1-rating-2" value="10"/>

 

[Jonny Cannuccia]

Du bist der Hammer!
Vielen herzlichen Dank. Hat Super geklappt!!

Danke Dir 1000x