Posted in ColdFusion | Posted on 12-14-2008 | 4,297 views
Omer asks:
I am looking for a way to navigate videos without refreshing the page. Currently I have pagination on the page and I only show 10 videos at a time. I only want portion of page to change when user select a different page number. I want to explore cfdiv and any other coldFusion 8 functions to accomplish this task. Thanks for your help in this regard.
This is pretty similar to how I used to do pagination on ColdFusionBloggers.org. That site now is mostly jQuery based, but here is a simple demo of how it could be done using just what ColdFusion 8 provides.
First, we will begin with our main page. The pagination will all be run via a DIV:
2
3<cfdiv bind="url:test2.cfm" />
The cfdiv tag will output a div and automatically load the url, test2.cfm, as soon as the page loads. (Got to love how easy that is in ColdFusion!)
Now let's look at test2.cfm. 99% of the code here is my simple pagination code. It's not perfect, and it's fake of course, but here is it:
2<cfset total = 92>
3<cfset perpage = 10>
4
5<cfloop index="x" from="#url.start#" to="#min(url.start+perpage-1, total)#">
6 <cfoutput>Record #x#<br /></cfoutput>
7</cfloop>
8
9<cfoutput>
10<cfif url.start gt 1>
11 <a href="#ajaxLink('#cgi.script_name#?start=#url.start-perpage#')#">Previous</a>
12<cfelse>
13 Previous
14</cfif>
15/
16<cfif (url.start+perpage-1) lt total>
17 <a href="#ajaxLink('#cgi.script_name#?start=#url.start+perpage)#">Next</a>
18<cfelse>
19 Next
20</cfif>
21</cfoutput>
There is a grand total of one thing I had to do to make this work within my Ajax-loaded div from the previous template. I wrapped the links with ajaxLink. This will automatically convert the link into code that will use Ajax to load the data and simply replace the contents of the current div.
You can view a live demo of this here. Personally I think this is a rather nice, if simple, use of Ajax. Paging through lots of data can be slow and tedious, and anything that can make it a bit nicer is probably a good idea.


Based on his follow up comments I'd say you gave him exactly what he wanted! Another happy customer - LOL.
It's easy to make the argument that interactivity and mutational and reactive interface programming is fundamentally different than visual skinning and presentationing. That interactivity is immutably tied to the structure and layout of an interface, and that it therefore makes more sense on all levels to an appropriate portion of Javascript live nextdoor to and among the markup it's managing.
[Add Comment] [Subscribe to Comments]