Category Archives: ColdFusion

Quick Coldfusion AJAX – Part 2

A graphical despiction of a very simple html d...
Image via Wikipedia

Where we left off

If the first part of this short Coldfusion AJAX series, we discussed using the CFDIV tag, along with the CFAJAXIMPORT tag to enable us to dynamically load content into a div (cfdiv) layout container on the fly.  The only custom javascript we made was to create a function that our href called to key the Coldfusion.navigate feature.

This time we will be discussing submitting forms asynchronously using Coldfusion, the CFDIV and CFFORM tags.  This nifty feature allows web developers to submit their form within a containing div, and have the results of that form appear directly back to the user without reloading the entire page.  In part three, the final installment, we will discuss how to build a search suggestion form control that dynamically populates a search text box as the user is typing.

CFDIV and CFFORM tags

We’ve already discussed the CFDIV tag, but now we discuss the CFFORM tag.  The CFFORM tag is specific to Coldfusion and inserts forms into the page with server and client side processing, including built in validation for the tags contained within the form.  Speaking of the tags within the form, they take on special characteristics and names, rather than using the input tag, we will be using the CFINPUT tag.

To ensure the form submits via AJAX we will simply enclose our form within a CFDIV container, keeping in mind that we need to include the proper tags via CFAJAXIMPORT.  The other thing to note is on the CFDIV we are including the the page that contains our form as the bind parameter this time. The listing below is the complete listing for the form, note I have omitted the rest of the standard page elements (head, title, body etc.) for brevity. Provided you have your form handler script setup properly, in this case I called it formprocess.cfm in the example, the form will submit within the div.

[quickcode]



[/quickcode]


In the form.cfm file we would have the following:

[quickcode]




[/quickcode]

Reblog this post [with Zemanta]

Quick Coldfusion AJAX

A graphical despiction of a very simple html d...
Image via Wikipedia

External Library?

With Coldfusion 8 and 9, there are a full host of tools that you can use to enahnce user interactions and interfaces in your web apps.  One of those is the built in AJAX features.  While you can program your own, or even use an external javascript libarary, Coldfusion has it’s own, and it is very simple to use, cross-browser friendly and can be implemented in short order.

While you follow the rest of the post, do keep in mind that using the Coldfusion solution present, it does load files from your Coldfusion installation libraries.  These javascript files are sent to the browser just as any other javascript file.  Also remember that this is just one tag in the Coldfusion AJAX library – there are many others that support asynchronous form postings and much more.

Using CFDIV

The first thing you will want to do is import the necessary tag to use the cfdiv layout control.  You can do this by including [quickcode][/quickcode] The second thing is to ensure you have a .cfm file with the content you are loading into the cfdiv.  Say for this example we will call it content.cfm.

In your page, you simple call the cfdiv like you would a normal div layout container, with one exception – the bind parameter which tells it which .cfm page to load. Keep in mind, if you need to pass in url parameters, that is fully supported, making it that much more dynamic.

[quickcode]
[/quickcode]

Putting it together

To really make it work well, let’s show a sample page, complete with a simple javascript function that calls another Coldfusion ajax control, Coldfusion.navigate.  The Coldfusion.navigate function let’s us dynamically load the content into the cfdiv – so we could build a navigation menu and use that to dynamically load the content into our div.

[quickcode]







[/quickcode]
Now, we have a basic page that will load somestartercontent.cfm when the page loads, and when the visitor clicks on the change content link, it will run the javascript function that calls the Coldfusion.navigate function.  This will load the content.cfm page into the myDiv div.  Note the Coldfusion.navigate function takes two parameters in this scenario – the page to load and the div to load it in.

Reblog this post [with Zemanta]

Old West Meets High Tech

Professional Bull Riders
Image via Wikipedia

What do Cowboys, Computers, the Web and Social Media all have in common?

They are joining forces to bring high-tech into the daily happenings of the Professional Bull Riders Built Ford Tough Series. Through the use of social media, the web and computers (and by computers I mean desktops, laptops, netbooks, smartphones and more) they are expanding their reach into new markets, new genres and opening up the sport to a much wider audience than ever before.

The 2009 season has seen quite a few changes at the PBR – from the main web site (http://www.pbrnow.com) getting a complete face lift early on, to the event information pages being completely redone to provide more information and better timed, to using social media, such as Facebook, Twitter and MySpace to not only communicate with fans, but provide more pertinent information even faster, the PBR has expanded its high-tech offerings to the world at large in the digital age.

You can follow @teampbr on Twitter to get behind the scenes photos in real-time from the events, including the currently happening PBR World Finals. They also provide some scores as they happen in real-time, along with photos of riders, bulls, opening ceremonies and more. They also run some trivia and other fun items during the events to engage followers even more. The same can be said for their MySpace and Facebook pages, with information going out faster and through more outlets than ever before.

One of the late offerings of 2009, which debuted two events prior to the PBR World Finals, was the addition of the Live Event Center. What the Live Event Center brings to the fans is a real-time, live updated ride-by-ride scoring system viewable in their web browser. Within seconds of a rider either riding a bull or bucking off, fans have the ability to see the rider score, buck-off-time if the rider bucked off and in all cases the bull’s score. The fans now have the ability to see the scores and other information at times they cannot watch it on television or the broadcast is delayed rather than live.

Additionally, one of the staff writers, Keith Ryan Cartwright, is “live blogging” – sending updates every few rides with information about the riders, their rides, the bulls, their bucks and behind the scenes text commentary with the riders, and others. This has been placed on to the live score page, so that visitors not only can see the scores, but then get a flight-by-flight “blog” update of all the action that gives some perspectives behind the scores. So now visitors to the PBR site can not only get live scores, flight-by-flight commentary, but they can follow the @teamPBR team and get some photos from in arena as well as other updates in regards to the rides, riders, bulls, bull fighters and more.

If that were not enough, for the debut of the 2009 PBR World Finals, visitors to http://www.pbrnow.com can click on the live photo page and get a very special treat. Andy and Matt from Bull Stock Media, the official photographers and stock provider to the PBR, are posting real-time live in-arena photos. These are in-your-face photos of the bulls, the riders, the rides – all the dirt, grime and hustle that makes the PBR THE Toughest Sport on Dirt. The photos are posted from the start of the show, including the rider introductions, the bull introductions, during the presenting of the American Flag, all the way through to the round winner circle, and eventually at the close of the 2009 World Finals World Champion ceremony.

Combine all of that with a mobile powered web site with the latest news and feature stories, http://mobull.pbrnow.com, blogs from some of the best in the businesses, including 9-time World Champion Ty Murray, and a complete online Audio podcast and Video archive located at http://pbr.tv – it is easy to see how the Toughest Sport on Dirt is fast becoming a high-tech sport – reaching new fans, new avenues and generating more content for viewers than ever before.

Reblog this post [with Zemanta]

ColdFusion and MSSQL NText Fields

Computer science
Image via Wikipedia

Late last week I was working on some new changes to PBR’s web site (my employer) and ran into a nasty snag of an issue. I was pulling data out of a table, and for an exceptionally strange reason, seemingly random HTML kept appearing in the source code. Needless to say, this HTML was breaking the layout I had been working towards and boggled not only my mind, but our SVP of IT’s mind as well.

In the end, we ended up changing the field type as it was held in the Microsoft SQL database. The field was originally set to be an ntext field, and we changed it to a varchar field, as it really had no purpose being an ntext field in the first place, but that’s another story. After we made the change, we did lose some data on the resulting trimming of the data field, however the parts that were trimmed were already migrated to another field, so big loss.

As soon as we changed this, the HTML injections ceased. What happened? I have put some sample code below to illustrate it.

What the code should have came out to be.

[quickcode]

My content was coming out of the db here

[/quickcode]

What the code actually came out to be before we changed the field type.
[quickcode]

My content out of the db here

[/quickcode]

You can see that my opening paragraph tag was automatically closed, a new one started and closed after the database content was published, and an empty paragraph added at the end.

Now it is possible that the site, with the many thousands of pages and hundreds of thousands of lines of code specified this in a CFC or CFTAG file – in other words it was tied to the field name/type to force the HTML output, but I could not find it anywhere.

Any thoughts or experience you may have on this? Share them in the comments.

Reblog this post [with Zemanta]