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:
<h2>My Page</h2>
<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:
<cfparam name="url.start" default="1">
<cfset total = 92>
<cfset perpage = 10>
<cfloop index="x" from="#url.start#" to="#min(url.start+perpage-1, total)#">
<cfoutput>Record #x#<br /></cfoutput>
</cfloop>
<cfoutput>
<cfif url.start gt 1>
<a href="#ajaxLink('#cgi.script_name#?start=#url.start-perpage#')#">Previous</a>
<cfelse>
Previous
</cfif>
/
<cfif (url.start+perpage-1) lt total>
<a href="#ajaxLink('#cgi.script_name#?start=#url.start+perpage)#">Next</a>
<cfelse>
Next
</cfif>
</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.
Archived Comments
It works, it is just too bad that both examples use obtrusive Javascript code.
But the JS works. It may not be the 'best' but it's practical and about as simple as you can get.
Sure it does work. But you know what I mean, it is not considered a good practice anymore to mix HTML and Javacript code. It is not difficult to achieve, specially with libraries like jQuery.
Well, I don't think it's the point though. If you know jQuery, and feel comfortable using it, you aren't the target for this feature. Know what I mean? For a guy who knows little to no JS, you have to admit this is -very- powerful for such little code.
Is there any reason why we wouldn't just use the html format cfgrid to do this? Lots of built in sorting and other functionality is already built in. Plus it is extremely easy to add listener style "find as you type" searching to that grid. I know that you were going for simple but I'm just throwing this out there as another simple idea that gets the job done with very little code.
This is exactly what I wanted. Thanks a lot for your help. You are a great resource of help for people like me, once again thanks for your time and concern.
@AS - It was my assumption he wanted more of a simple list then a table.
@Ray
Based on his follow up comments I'd say you gave him exactly what he wanted! Another happy customer - LOL.
Jean: It depends on who you ask. A lot of people think that the "unobtrusive Javascript approach" is a crock of horse and does little more than add extra maintenance and scavenger-hunt-like round tripping to an AJAX app.
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.
is there a way i can make this work in coldfusion 9?
It should just work. Is it not?