AJAX ColdFuison SQL - Trying Create Module On Page that Updates Every 5 Mins Without Reloading Whole Page : AJAX, ColdFusion

May 13, 2008 02:02am pdt

1. Zvonko 132,510
2. _agx_ 102,210
3. SidFishes 83,058
4. Plucka 75,113
5. gdemaria 68,340
6. SBennett 41,530
7. hielo 29,090
8. zadoc 26,550
9. pmascari 24,754
10. Mr_Nil 22,710
11. js_vaughan 19,500
12. Jester_48 17,825
13. erikTsomik 13,450
14. srikanth... 12,950
15. Kerrdo 11,650

1. _agx_ 475,765
2. gdemaria 410,332
3. SidFishes 209,864
4. SBennett 204,175
5. Zvonko 141,574
6. Plucka 96,813
7. pmascari 73,529
8. Jester_48 54,645
9. zadoc 53,680
10. hielo 50,590
11. js_vaughan 49,900
12. pigmentarts 29,598
13. digicidal 27,550
14. 73Spyder 26,575
15. erikTsomik 25,720

03.21.2008 at 07:37AM PDT, ID: 23259715

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.9

AJAX ColdFuison SQL - Trying Create Module On Page that Updates Every 5 Mins Without Reloading Whole Page

Zones: Cold Fusion Markup Language, JavaScript, Dynamic HTML (DHTML)

Tags: AJAX, ColdFusion

Hi, I'm trying to create a Module on one of my cfm pages. So I need to use Ajax. It seems as though every example on the web that I've seen, has you selecting something from a drop down box or tab and the data updates. I don't want that. Nothing will be clicked at all!

The Module needs to update every 5 minutes without reloading whole page. I realize CF8 has tags that can do a lot of this, but we are using CF7 so thats not an option. The module contains data, that comes from a SQL Server database. If the user leaves the browser open and does nothing, within 5 minutes that data in that module should automatically refresh with the new data (or the old data if nothing is new). So here is some sample code that would currently bring back data every time the entire page would be refreshed. Have at it.

<CFSET BackDate = DATEADD('d',-7 ,NOW())>
<CFSET BackDate = DATEFORMAT(BackDate,'mm/dd/yyyy')>

<CFQUERY NAME="GetArticles" DATASOURCE="#Request.DataSource#">
      SELECT Top 5 *
      FROM Articles
      WHERE InsertDate > <CFQUERYPARAM CFSQLTYPE="cf_sql_date" VALUE="#BackDate#">
      ORDER BY InsertDate DESC
</CFQUERY>

<LINK HREF="css/Sample.css" REL="stylesheet" TYPE="text/css">

<CFOUTPUT>
<TABLE WIDTH="550">
      <CFLOOP QUERY="GetArticles">
      <TR>
            <TD CLASS="todaylink">
                  <A HREF="#IngestedID#">#Left(ArticleTitle, 95)#<CFIF ArticleTitle GT 95>...</CFIF></A>   <SPAN CLASS="searchex">#DateFormat(InsertDate, 'MM/DD/YYYY')#</SPAN>
            </TD>
      </TR>
      <TR>
            <TD CLASS="searchex">
                #Left(ArticleSubTitle, 90)#<CFIF ArticleSubTitle GT 90>...</CFIF>
            </TD>
      </TR>
      </CFLOOP>
</TABLE>
</CFOUTPUT>

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: FSUKXAZ

Solution Provided By: SBennett

Participating Experts: 1

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

03.21.2008 at 10:31AM PDT, ID: 21181529

Rank: Guru

SBennett:

If you want to do AJAX with CF7 or earlier versions of CF I suggest you use the JSMX api that you can get at http://lalabird.com/. It is very easy to set up and you could create the functionality you need fairly easily.

03.21.2008 at 12:17PM PDT, ID: 21182377

FSUKXAZ:

I've been there and it doesn't do anything for me. I'm a Lead CF Developer, and have no knowledge of Ajax which is why I made the post here. I'm looking for some real answers and not links to any sites that would come up in a google search with the words "ColdFusion" and "Ajax" used together in the search.

03.21.2008 at 01:39PM PDT, ID: 21182994

Rank: Guru

SBennett:

What you will need to do is download the JSMX API scripts from http://lalabird.com/?fa=JSMX.downloads
Then unzip the tree .js files into a folder in your webroot. Then you use <script> tags to tell the browser to import the js files when it loads the page. You can set up a div layer that will hold the results of the ajax request. then you write a javascript function to do the HTTP request, and a javascript function to handle the response and place the results into the div layer. Assuming your code above is in a template named "articles.cfm" it would look something like this:

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

           
           
             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
	<script src="engine.js"></script>
	<script type="text/javascript">
	function refreshArticles(){ 
		http( "GET" , "articles.cfm" , articlesResponse ); //notice the third argument = articlesResponse. This is the callback function below.
	}	
	function articlesResponse(res){ //callback functions always take one argument. This is the result passed back from the server.
		document.getElementById("ArticleDiv").innerHTML = res;
		setTimeout(refreshArticles(),300000);//this will call the refreshArticles function again in 5 minutes.
	}
	</script>
	<link rel="STYLESHEET" type="text/css" href="northwind.css">
 
</head>
 
<body onLoad="refreshArticles();"><!-- here is where we call the server for the first time. -->
 
<DIV class="ArticleDiv"></DIV>
 
</body>
</html>

           
         

Open in New Window

03.25.2008 at 10:27AM PDT, ID: 21204034

FSUKXAZ:

I have all three js files in the root. I have all your code in a page called Test.cfm I have my page, Articles.cfm. Then what? Because if I run the Test.cfm page I get the following error:

"Parsing Error. The value returned cannot be evaluated."

Am I supposed to add something else? If so what exactly?

03.25.2008 at 10:58AM PDT, ID: 21204343

Rank: Guru

SBennett:

sorry, you need to use cfsavecontent and cfwddx to convert the html output to a format readable by the JavaScript. Also I had some minor syntax errors because I did not test my original post.

The example below is tested and works properly. I left the query parts out because I don't have a database set up like yours, but I had the articles.cfm return the current date/time instead. So you will have to modify the articles.cfm to show the output you want, you will also need to change the setTimeout line in the javascript back to 300000 ms so that it runs every 5 minutes:

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:

           
           
             Test.cfm
--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
        <script src="engine.js"></script>
        <script type="text/javascript">
        function refreshArticles(){ 
                http( "GET" , "articles.cfm" , articlesResponse ); //notice the third argument = articlesResponse. This is the callback function below.
        }       
        function articlesResponse(res){ //callback functions always take one argument. This is the result passed back from the server.
                document.getElementById('ArticleDiv').innerHTML = res;
                setTimeout(refreshArticles,1000);//this will call the refreshArticles function again in 5 minutes.
        }
        </script>
        <link rel="STYLESHEET" type="text/css" href="northwind.css">
 
</head>
 
<body onLoad="refreshArticles();"><!-- here is where we call the server for the first time. -->
 
<DIV id="ArticleDiv" class="HTMLOutput"></DIV>
 
</body>
</html>
 
 
 
 
articles.cfm
--------------------------------------
<cfsetting enableCFoutputOnly="Yes" showdebugoutput="No">
<cfsavecontent variable="HTMLOutput">
<CFOUTPUT>
<LINK HREF="css/Sample.css" REL="stylesheet" TYPE="text/css">
 
 
<TABLE WIDTH="550">
     
      <TR>
            <TD CLASS="todaylink">
                  <A HREF="test">test</SPAN>
            </TD>
      </TR>
      <TR>
            <TD CLASS="searchex">
               &nbsp; Current Time: #dateformat(now(),"mm/dd/yy")# #timeformat(now(),"HH:mm:ss")#
            </TD>
      </TR>
     
</TABLE>
</CFOUTPUT>
</cfsavecontent>
<cfwddx action="CFML2JS" input="#HTMLOutput#" toplevelvariable="response">
           
         

Open in New Window

Accepted Solution

03.25.2008 at 11:01AM PDT, ID: 21204364

Rank: Guru

SBennett:

Also I would link the style sheet in the main page not the articles.cfm file, so do it like this:

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:

           
           
             Test.cfm
--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
        <script src="engine.js"></script>
        <script type="text/javascript">
        function refreshArticles(){ 
                http( "GET" , "articles.cfm" , articlesResponse ); //notice the third argument = articlesResponse. This is the callback function below.
        }       
        function articlesResponse(res){ //callback functions always take one argument. This is the result passed back from the server.
                document.getElementById('ArticleDiv').innerHTML = res;
                setTimeout(refreshArticles,1000);//this will call the refreshArticles function again in 5 minutes.
        }
        </script>
<LINK HREF="css/Sample.css" REL="stylesheet" TYPE="text/css">
 
</head>
 
<body onLoad="refreshArticles();"><!-- here is where we call the server for the first time. -->
 
<DIV id="ArticleDiv" class="HTMLOutput"></DIV>
 
</body>
</html>
 
 
 
 
articles.cfm
--------------------------------------
<cfsetting enableCFoutputOnly="Yes" showdebugoutput="No">
<cfsavecontent variable="HTMLOutput">
<CFOUTPUT> 
<TABLE WIDTH="550">
     
      <TR>
            <TD CLASS="todaylink">
                  <A HREF="test">test</SPAN>
            </TD>
      </TR>
      <TR>
            <TD CLASS="searchex">
               &nbsp; Current Time: #dateformat(now(),"mm/dd/yy")# #timeformat(now(),"HH:mm:ss")#
            </TD>
      </TR>
     
</TABLE>
</CFOUTPUT>
</cfsavecontent>
<cfwddx action="CFML2JS" input="#HTMLOutput#" toplevelvariable="response">

           
         

Open in New Window

03.26.2008 at 06:55AM PDT, ID: 21211620

FSUKXAZ:

It works. Gracias!

So I take it where the CFINCLUDE was that originally included Articles.cfm in my application, should now be changed to the page called Test.cfm?

Also I noticed the CFWDDX tag. I never used that one before. I thought that had more to do with XML, but I looked it up on Adobe and it mentioned it writes JavaScript statements to istantiate JavaScript objects.

20080236-EE-VQP-29 / EE_QW_2_20070628