Home >
A question from one of my readers:
Hello Ray. I'm working on a "Product Review" feature for a commerce site that is modeled after llbean.com.
Click the "Customer Reviews" tab here for an example:
Using jQuery, how can I get the prev/next link functionality (to show 4 reviews at a time) and the "Sort By" form pulldown to work w/o a page refresh?
One thing I've found with jQuery is that - much like ColdFusion - anything is possible! Obviously I'm biased, but just go along with me for now. I decided to create a simple demonstration of how this could be done with jQuery and ColdFusion. I began by creating a script that would do basic pagination. This script is ColdFusion based and is absolutely not required to answer the reader's question, but I wanted a quick way to create some data for my AJAX application. Those of you who don't do ColdFusion, just skip over this step. Do note that the result of this dynamic template is to create a paged interface to 32 fake reviews. No database is involved in this demo. In the real world obviously that would not be the case.
<cfparam name="url.start" default="1">
<cfif url.start lt 1>
<cfset url.start = 1>
</cfif>
<!--- number of items per page --->
<cfset perpage = 10>
<!--- hard coded max --->
<cfset max = 32>
<cfoutput>
Reviews #url.start# to #min(url.start+perpage-1,max)#.<br/>
<cfif url.start gt 1>
<a href="reviews.cfm?start=#url.start-perpage#">Previous</a>
<cfelse>
Previous
</cfif>
-
<cfif url.start+perpage lt max>
<a href="reviews.cfm?start=#url.start+perpage#">Next</a>
<cfelse>
Next
</cfif>
<cfloop index="x" from="#url.start#" to="#min(url.start+perpage-1,max)#">
<p>
<b>Review #x#.</b><br/>
This product is #x mod 2 is 0?"awesome":"horrible"#!
</p>
</cfloop>
</cfoutput>
Before going any further, I tested this in the browser and ensured everything worked correctly. So now for the front end. I began by creating a basic HTML page:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
})
</script>
<style>
#reviews {
background-color:#c0c0c0;
padding: 10px;
}
</style>
</head>
<body>
<h1>Product X</h1>
<p>
The best product you will ever buy!
</p>
<h2>Reviews</h2>
<div id="reviews"></div>
I've got jQuery loaded on top and a basic DIV (reviews) where I'll store my content. Adding in remote content via jQuery is simple enough. The first line within my document.ready block is:
$("#reviews").load("reviews.cfm")
As before, I ran this in the browser to ensure everything was kosher:
Woot. So the content loaded in fine. But what happens when you use the pagination? It reloads the entire page. This is expected of course, but you might assume that the content would "stay" inside the container it was loaded. Nope. Luckily this is pretty easy to fix using a technique known as hijax. Basically we need to take over the default click option for the links. jQuery makes it easy to listen to events. However - we have another problem as well. Because the content is loaded after the page loads, and the content will change every time we change pages, we need to tell jQuery to always listen for the clicks. This can be done with the live method:
$("#reviews a").live("click",function() {
$("#reviews").load($(this).attr("href"))
return false
})
This code tells jQuery to monitor all A tags within the reviews div no matter when it's loaded. The hijax part simply grabs the URL from the link and loads it within the div.
And that's it. Enjoy.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Comments
Leave a comment