My ColdFusion page displays a list of private messages for a user in their user account. This list is at the top of the page and shows date, time, sender, and subject. When the user clicks on the subject of any message in the list, Javascript Ajax is used to fetch the message details from a component and display the message fully below the list, kind of like an email program. Also when the page loads, as a default the first message in the list is automatically passed to that Javascript Ajax and displayed. That's easy enough so far.

It gets more complicated when you allow that same page to be passed a URL query param equalling a message id you want specifically to be shown first, instead of just the first row in the query. It's hard to explain but try to follow me. It's not my intention to explain everything like a tutorial so here's the code I implimented to solve my issue.

The page would be called like so, http://www.site.com/showPrivateMessages.cfm?privatemessageid=2435. But remember that the page can be called without the URL param, in which case it would just use the first record in the query of private messages. Including the param would tell the page to display that particular message's details first.

So on the called page I get my private messages query: privateMessagesQuery = event.getValue('privateMessagesQuery'); (I'm using the Coldbox framework)

Set up the param to use with a default of 0: privatemessageid = event.getValue("privatemessageid","0");

Then I need to define which row in the record matches the one I want, but I must set this up first: rowtouse = 0;

Now I need to recurse through the query in a loop to set the rowtouse variable equal to the row found for the id:

Ad now in my Javascript I want to use that row number to set some variables to use in a function call that displays the message details for the message who's id matches that passed in the URL param. I'm not showing the function that does the actual displaying of details, just the function name for time and space's sake (I'm busy).

The showMessageDetails just sets values in span tags, DHTML Ajax stuff. Any ways, you can see here how I'm using ColdFusion inside of Javascript to use back in ColdFusion, or HTML to be technically correct.

Here is an example of calling a Javascript function on page load in the script block.

And I found this cool resource while looking around, it's a book: Structure and Interpretation of Computer Programs or SICP. What does that have to do with this you ask? Well if you need something like the following example of a complexed javascript onload, it might come in handy.

First let me note that I am using Coldspring version of IOC. It should work the same though with any form of IOC. Mostly we need the IOC to provide the bean to the services your Ajax call requires from within the Coldbox proxy.

After having provided a service in Coldspring like so:

we can use this "usersService" bean in the coldboxproxy.cfc like this:

The code above is what the Ajax, cfcajaxproxy, will call as a method for Coldbox to perform. It fetches a private message object bean, sets or updates some properties, then uses the gateway to save the object bean. I don't have a return or output but you can do that also here if desired. And here is the actual view and Ajax calling code:

The code I provided is a cut down version of actual code and does not include the view event, form code, queries, or other behind the scenes code. I hope this helps to give you a step ahead on how to use Ajax with the Coldbox framework.

If your trying to use javascript DHTML to hide and show multiple generated dynamic table rows with one link/button you may find yourself pulling your hair out. Surrounding the tr's with a div won't work. And giving the tr itself an id and doing it that way won't work because there will be more than one. Then if you try to dynamically name the id's and loop through them; nightmare!!

Tbody to the rescue. I hate tbody's. I never use them and despise when word html includes them. But this is the one time I can think of a good use for it. Surround your dynamically created tr's with one of these, give it an id, and use that to hide and show all the rows at one time.

code example:

Javascript

HTML

And yes, I even work on the 4th of July.

http://www.interspire.com/content/articles/10/1/Building-An-Expanding-DHTML-Menu-With-CSS-and-JavaScript

The technology for screen and audio recording is available, so why not use it, right? Introducing a new tutorial source right here on CFCDeveloper.com. I can get work done and show you some tricks at the same time, how cool would that be!

The "Creating an MVC ColdFusion OOP Application" tutorial I started here in text form will be discontinued in favor for video and audio.

Stay tuned...

For those of you who might have found this blog looking for Ajax information and your completely new to it, I'll explain Ajax very simply and then move on.

Ajax is not a programming language but uses JavaScript and the browser DOM to do most of the work between client and server. Without JavaScript, there is no Ajax. So it would benefit you to learn JavaScript also if your not already versed. Mostly what Ajax does is ties together web pages with other programming technologies to perform actions on user input "behind-the-scenes". Basically it allows you to get around the whole stateful page-refresh waiting problem.

For instance, with the application I'm about to present, you could make a lookup page where the user enters employee ID's to find employee information from a database. This application could continue to check the database as the user is typing in the ID number and present the result when it hits a valid number.

With my application I'm using ColdFusion on the server end to do the behind-the-scene work. You can possibly translate this to fit your choose of PHP, ASP, JSP, or others. And there are pre-written Ajax frameworks that do it all for you such as Spry and CFAjax, but I like to create my own wheels.

So I'm creating 2 pages, ajaxtest.cfm and getempdata.cfm within the same directory. The user will see and use ajaxtest.cfm which consist of a form to enter an employee ID that also outputs the result when it hits a valid ID you are entering. The ajaxtest.cfm calls to the getempdata.cfm to retrieve results of a query each time the user enters a number. A match will output that employee's data to the form fields.

ajaxtest.cfm

getempdata.cfm

Some of the code is not needed as I was using it to experiment with. Other stuff you have to change to suit your own environment, such as providing your own database and data. But hopefully you find something that will help you. Later when I get a little better at this I can write a full tutorial with an actual working demo.

Place in head in script tag.

Place this just before ending body tag:

Example of use:

And you have to make your own close.gif image.