AJAX to do Real Time DB Polls like Twitter's "Real Time Results" in Coldfusion

Question

Hello All,

I want to do something similar to the way twitter searches use AJAX to create the "Real-Time Results".. It seems that the database is polled every 15 seconds or so and the number of new records is displayed to the user after each pull. I am working on a Coldfusion 8 server with a MS SQL database and I need to implement something like this ASAP.

I believe the solution will involve jquery javascript library (http://jquery.com), coldfusion components, cfajaxproxy to work with the cfcs, and the JavaScript setInterval() function. I'm tight on time; can anyone illustrate some sample code for an implementation of the simplest version of this? Hopefully I can then understand and adapt it to my needs.

Thank you in advance!!

Answer 1

You can either use setInterval or setTimeout depending on how you want to do things. You may also want to use clearInteval or clearTimeout to prevent the refreshing in certain situations.

For the AJAX stuff, you can use jQuery's functions, the example below uses getJSON which is more lightweight than HTML (which the jQuery.get woudl do), but this means processing it to create the HTML on the client.

For example:

$j = jQuery.noConflict();

$j(document).ready( initSearching );


function initSearching()
{
    Searching = setInterval( 'updateSearch()' , 5000 ); // 5s while testing...

    $j('#StopRefreshBtn').click( stopSearching );
}

function stopSearching()
{
    clearInterval(Searching);
}


function updateSearch()
{
    if ( $j('#SearchBox').val().length > 0 )
    {
     sendSearchRequest( $j('#SearchBox').val() );
    }
}


function sendSearchRequest( SearchTerms )
{
    $j.getJSON( 'http://www.myserver.com/webservices/mycfc.cfc?method=readData&SearchTerms='+SearchTerms , handleSearchResponse );
}

function handleSearchResponse( SearchResults )
{
    console.log( SearchResults );
    // TODO: Handle JSON response to render the HTML results.
}

Then, on the CF side, you just need a component with a remote function - and since I'm doing it with JSON, the returnformat is set to that:

<cfcomponent output="false">

    <cffunction name="readData" returntype="array" output="false" access="remote" returnformat="json">
     <cfargument name="SearchTerms" type="String" />
     <cfset var Results = ArrayNew(1)/>

     <!--- TODO: search and populate array of results. --->

     <cfreturn Results />
    </cffunction>

</cfcomponent>

The above is all quickly thrown together and not tested - hopefully if anyone sees problems with it they'll point them out.

For more details on doing remote requests with jQuery and ColdFusion, there are some answers to this similar question: http://stackoverflow.com/questions/999501/invoke-coldfusion-function-using-ajax

Hopefully that all makes sense, and gets you heading in the right direction?