jQuery Infinite Scroll PLugin

[DiDiJo]

Hi Leute,

ich habe eine Suchergebnisseite aufgebaut, die ca. 150 Elemente hat:

<div id="searchResult">
  <div class="searchElement">1</div>
  <div class="searchElement">2</div>
  <div class="searchElement">3</div>
  <div class="searchElement">[...]</div>
  <div class="searchElement">N</div>
</diiv>
<a id="next" href="loadNext?start=15">more content</a>

Da in den SUchergebnissen auch Bilder vorkommen, möchte ich die Gesamte Liste nur Stück für Stück ausgeben lassen.

Dafür habe ich 2 jQuery PlungIns gefunden und ich bin scheinbar bei beiden zu Blöd die richtig einzubauen.

Plugin-Nr. 1:
Link zum Plugin

Mein HTML Aufbau entspricht natürlich dem oberen Beispiel. Mein JS-Code sieht wie folgt aus:

<script type="text/javascript" src="/js/jquery/jquery.infinitescroll.min.js"></script>
<script type="text/javascript" src="/js/jquery/behaviors/manual-trigger.js"></script>
<script>
$('#searchResult').infinitescroll({

	//callback		: function () { console.log('using opts.callback'); },
	navSelector  	: "a#next:last",
	nextSelector 	: "a#next:last",
	itemSelector 	: "#searchResult .searchElement",
	debug		: true,
	dataType	 	: 'html'
}
</script>

Dort bekomme ich nun aber folgenden Fehler (kein JS-Fehler sondern ein eintrag in meiner Console): "Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com." Der gefundene Link ist auf jeden Fall der richtige ... ich vermute es liegt an den mitgelieferten Variablen in meinem "Next-LINK".
Hier ein Beispiel-Link: http://7th.in/1412


Plugin-Nr. 2:
Link zum Plugin

Mein JS-Code sieht wie folgt aus:

<script>
jQuery.ias({
	container : '#searchResult',
	item: '.searchElement',
	pagination: 'a#next123:last',
	next: 'a#next:last',
	//loader: 'http://www.infinite-scroll.com/loading.gif'
	loader: '<img src="/pics/loader.gif"/>',
	history: false,
	onLoadItems: function(items) { alert('We loaded ' + items.length + ' items'); } 
});

</script>

Hier habe ich mehrere Probleme: Das Plugin wird ausgeführt sobald ich scrolle und nicht erst wenn ich am ende angekommen bin. Außerdem findet es keine Objekte / füght keine Objekte meiner Liste hinzu.
Hier ein Beispiel-Link: http://7th.in/1413


Meine loadNext.php baut übrigens exat die gleiche HTML Struktur auf ... wenn ich auf den Link draufklicke, erreiche ich auch diese Seite ... nur die Plugins können die Seite irgendwie nicht verarbeiten bzw. das 2. Plugin findet keine Ergebnisse in der geladenen Seite ...


Hat jemand schonmal Erfahrungen mit einem solchen PlugIn gemacht und kann mir dabei ggf. weiterhelfen? Oder hat jemand ein anderes Plug-in genutzt, was einfacher zu integrieren war?

Mit freundlichen Grüßen

Daniel

 

[JayJayS]

Hallo Daniel

jquery_ias funktioniert nur mit html-Dateien und nicht mit php-Dateien.
Hast du zwischenzeiltlich eine Lösung für die Umsetzung gefunden ?

 

[Parantatatam]

PHP ist völlig unabhängig von HTML und es interessiert das Skript auf der Clientseitig einen feuchten Dreck, ob die Seite nun eine statische HTML-Datei, ein HTML-generierendes PHP-Skript oder ein überfahrener Affe ist, auf dessen Rücken die die Reifenspuren wie HTML aussehen. Solange es den Inhalt parsen kann, ist es okay. Wer das auf dem Server liefert, dass ist egal.