Looking for a good dynamic table sorting solution? We have been playing with a few out there including spry and well we think we have found a goodie.

We thought we would take a sec to explain how we integrated it into an app. Whats great about this implementation is it is totally unobtrusive and could be implemented site-wide with ease.

We included the two javascript files that you can downloaded at the bottom of http://www.frequency-decoder.com/ blog entry.

The first script can run without the second script if you don't require page numbering however i would highly recommend it.

Now simply create your table and its all about the class, we have tested with more than one table and it was absolutely fine..

Its all about the class which its pretty clever. To breakdown what we have worked out each parameter means

• sortable(pretty clear) - onload-3-reverse (sort column three in reverse)
• rowstyle-alternative (pretty clear)
• paginate-7 (how many records to show on a page)

Now simply create the rest of your table defining which columns you want to sort by

We have done some load testing and as the author explains there are a number of things that will slow this down including having ALOT of records. However the wait was totally acceptable with a thousand or so records. Hopes this helps and if all goes well and we can find sometime look forward to an update to our datagrid solution.

Got a neat little note tracking system to develop and thought that the spry framework could be used to do the view layer. So here is my First Spry experience.

What I am doing is fairly basic, pretty much recieving a recordset out of a cfc into a proxy page then displaying a dynamic table through a custom tag.

This example goes through the process from a query to displaying the table in a custom tag.

So i changed my getNotes() function to returntype="xml" and by using Ray's toxml() i did the following to my recordset

I now set up a proxy page to hit the cfc and return the xml object

And after calling the spry js i then called my proxy page.

Now that the spry dataset was in all i had to do was display it.

This is the really neat part of spry

create a spry region to display your data

Then create your table

On columns that you want to be able to sort add the following

Then set up your spry results

this should return the first record and very much like coldfusion all you need to do is define where you want to loop like this

TIP - its case senstive!!! and rays toxml function makes everything Upper Case.

So now when i want to include my note table all i have to do is include the following at the bottom of any item page and up comes a spry table

Resources I used to getting it working inside our system were

Dynamic Table Tutorial on Adobe Labs

Ray's toXML() function and widsom

Large Amount of Spry Resource

In the last post we created a package to install googiespell into your blogcfc and now we would like to explain how we did this.

install the attached zip file into your site root.

and where you want to add the spell checking functionality include the following .js and css pages

In blogcfc there are two nice places to add the spell checking functionality

now in this example we will add it to /admin/entry.cfm look for the textarea that holds the body and add an ID="" to it so it looks like

and then add the javascript code needed to load the spell checker

Now if the googiespell directory is in your root you should have no worries however if you have moved it then you will have to ensure you fix it up here. Also at the moment we have it pointing to cgi.http_host however this could be static like

This is all you have to do to getting it working with coldfusion we have just used this amazing blog as an example. There are, as explained in previous blog entries modifications to the release version of googiespell (3.78) and you should visit Orangoo Labs Licence for GoogieSpell to ensure you comply with the license agreement.

Hope you find this useful.

Attached is a zip file that integrates GoogieSpell into Ray's BlogCfC

As explained in previous posts we have had to modify the actual release code of googiespell 3.78 to get it running with coldfusion, due to the way it was sending the form scope.

The only actual change in the blogcfc code is the addition of 3 javascripts and 1 css in the entry.cfm page.

The other change you may have to make is relative to where the googleapi.cfm is sitting. currently I have it sitting in the root and pointing to

Yet you may need to change this if it is incorrect.

For an example of the spell checking working with blogcfc add a comment to this blog entry as we have integrated it here for demo purposes.

After testing out the spelling implementation we found that we were having issues with html tags and other unique characters. We couldn't even get it to send to our action page.

So we did some research and decided to encode the text string in the javascript and this worked nicely.

So we replaced the

with

And had success. A lot of our blog entries have code and interesting characters and we have not had any issues so far but of course we will keep you posted on any other issues we have.

If you would like to research more of the capabilities of the encodeURIComponent() function this page Comparing escape(), encodeURI(), and encodeURIComponent() was very useful. It certainly saved us here!

Expanding on our current xmlhttp request function. We wanted the flexibility to send not only via the url scope but also the form.

So to expand on our function we had to do the following.

set up our parameters we want to send

Set up our headers

And then send the paramaters

To test your results set up a cfdump(form) or an output to file on the action page and you should be able to see the form parameters you sent.

Check this page out as another example, this example also has some neat error handling in it.

While the web becomes more popular and easier for publishing content it doesn't mean we are getting better at spelling.

During our quest for a spelling solution, we at Redballoon found a very nice ajax plugin that allows you to add a spell checker into any textarea in your application.

Introducing GoogieSpell.

What is so brilliant about this plug in is its "gmail" like functionality. While this plug in appears to be out of the box it has one very major limitation.

While the author provides solutions for php/perl/asp there was not yet a coldfusion solution available on the site.

So we sat down and developed a coldfusion implementation that slides nicely into our labs blog (Ray Camden's Blog CFC).

Here is the solution we came up with.

Once you have called in the 3 javascripts and the 1 css just put an 'id' on your textarea and instead of calling this that is straight out of the demo.html

call this

So essentially all we are doing is calling our coldfusion page instead of the google page directly.

Now, we did have to change one thing in the core "googiespell.js" as it was not passing the form scope correctly across to our coldfusion page.

We changed the createXMLReq from

to

And then all we have to do is the http call on the coldfusion page "googleapi.cfm?"

Which you can copy and paste from below

There were many ways we debugged what was going on and one of the most useful ways was using a firefox extension "live headers". This allowed us to log and watch LIVE what each page was passing to each other.

If you would like to know more regarding this project or how to implement it into your application please feel free to leave a comment and we will do our best to help out.

This is our implementation of xmlhttp so far... but we are certainly looking at ways to improve it.

This is the form that we are passing to the function which should be in the of the page. call the function Tell your user friend you are doing something... What you are doing here is setting the action page to hit with the variables. You can send any document objects by passing them through the function like The best way to test to see if everything thing is working, is to put on your action page. Now open up your Xmlhttp Connection Now 4 is "Successful Connection" and if you would like to put a few cushions incase the connection was not as success as you would have liked then this is the place to do it. However if all is well you can pass through whatever the action page outputed into your div Otherwise nothing will happen and most likley one of your variables are spelt incorrectly, you can test that by going into the javascript debug menu in FireFox.

Hope this helps and we have certainly extensively used this, But as we said we are certainly looking at ways to make this better.