Join Daniel Short for an in-depth discussion in this video Manipulating container contents, part of ColdFusion 9: AJAX Controls and Techniques.
So we've spent a lot of time so far in this chapter talking about containers for your content. Now I'm going to show you a few but not all of the ways to change the content of those containers in the browser. I'll cover some additional ways to manipulate container contents later in this course. So the two easiest ways to change container contents are by using the ColdFusion.navigate function and the AJAXLink function. So let's create a new file to show how these work. So we'll create a new ColdFusion page called navigate.
And I'm just going to very quickly add a couple of tags here. Actually I'm just going to add one tag, cfdiv. So we'll give it an id of lipsum, and we're going to bind it to the kafka.cfm file. So if I open up that kafka.cfm file, we can see it has just a couple paragraphs worth of text, and then it has an href that goes to the lipsum.cfm. So what I'm going to do is load up this page and then I want to be able to click this link and load the contents of lipsum.cfm into this same cfdiv.
So let's add a header on here. So, this is my lipsum text. We'll save that file. And we'll switch over to Firefox and go to navigate.cfm. So here's my h1 that's directly on my page. Now here's all that kafka text inside of my cfdiv. So if I click on Go to Lipsum, unfortunately I end up going directly to lipsum.cfm instead of loading it directly inside of my container. So let's go back.
Then we'll go back to ColdFusion Builder, and I'm going to go into kafka.cfm and add a function around this called AJAXLink. We'll just wrap our URL directly in that, and then I need to have a cfoutput around here. And now instead of going directly to the lipsum.cfm, ColdFusion is going to say, "okay, this kafka.cfm is being called from another ColdFusion container, so I'm going to change this link so that it browses within that container." So it's far easier to show than it is to explain it.
So first, before I reload the page, if I hold my mouse over the Go to Lipsum link. If you look down in the status bar, you can see it says localhost:8500/Chapter1/lipsum.cfm. I'll reload my page. Now if I hold my mouse over that link down in the status bar, it says ColdFusion.navigate, lipsum.cfm and lipsum. The first argument is the page I wanted to load. The second argument is the container I want it to load into. Now if I click Go to Lipsum, I still have my h1 and it's now loaded lipsum.cfm inside of that cfdiv.
So I'll go ahead and reload my page, and we'll hold my mouse over this again. As you can see, that ColdFusion.navigate function we can actually use from anywhere. It doesn't have to be used with the AJAXLink ColdFusion function. So let's go back to our navigate.cfm, and we'll create our own link to change the content of the lipsum div. So we'll do a href=ColdFusion. navigate, we wanted to load lipsum.cfm into the lipsum container.
And let's put a pipe separator there instead of a break and see how that works. We'll reload our page, and we'll click Load Lipsum text. There we go, and then Load Kafka text. And so I can go back and forth changing the contents of that cfdiv by using the ColdFusion.navigate function. So one more really cool thing about the AJAXLink function. As you can see if I hold my mouse over here it says ColdFusion.navigate down in the Status bar.
But if I go directly to kafka.cfm and I hold my mouse over that link as you can see it goes straight to Chapter1/lipsum.cfm. So the AJAXLink function is smart enough to know when it should or it should not rewrite that link to use the ColdFusion.navigate. So using the ColdFusion.navigate makes it trivial to dynamically change the content on your page with the click of a button. Just remember to always ID the containers that you want to manipulate and use that same ID as the second argument in your ColdFusion.navigate function.
- Manipulating and securing container contents
- Debugging AJAX behaviors
- Building UI elements such as accordions and border layouts
- Using rich prompts with cfmessagebox
- Understanding advanced cffileupload
- Sorting and grouping data in grids
- Binding data to form fields
- Creating a map with markers