Next steps with Performer

Step 5: Modifying the logged-in users list to use ReLoader

ReLoader is the first Performer function we've used that fetches content from a remote page, known as AJAX. AJAX is a bit tricky to use, easier with a JavaScript library, and really easy with Performer. I just need to add the ReLoader CSS classes:

<ul class="icons reloader targetPage-/next-steps/jazz-usersonline delay-30">
	<li><a href="#"><img src="1.jpg" alt="1" /></a></li>
	<li><a href="#"><img src="2.jpg" alt="2" /></a></li>
	<li><a href="#"><img src="3.jpg" alt="3" /></a></li>
	<li><a href="#"><img src="4.jpg" alt="4" /></a></li>
	<li><a href="#"><img src="5.jpg" alt="5" /></a></li>
	<li><a href="#"><img src="6.jpg" alt="6" /></a></li>
	<li><a href="#"><img src="7.jpg" alt="7" /></a></li>
	<li><a href="#"><img src="8.jpg" alt="8" /></a></li>
	<li><a href="#"><img src="9.jpg" alt="9" /></a></li>
</ul>

In this example the content will be fetched from the /next-steps/jazz-usersonline page every 30 seconds and put into the list. The /next-steps/jazz-usersonline page therefore needs to produce HTML which looks like:


	<li><a href="#"><img src="1.jpg" alt="1" /></a></li>
	<li><a href="#"><img src="2.jpg" alt="2" /></a></li>
	etc...

So now, every 30 seconds, the content in the users online list will be reloaded from the remote page. Take a look at it working here. Go to step 6....

Pages: 1 2 3 4 5 6 7 8