jensbits.com » ColdFusion

Clicks and Impressions from Google Adwords API using ColdFusion

jen — Sun, 18 Jul 2010 18:28:22 +0000

Requests for simple data like clicks and impressions from the Google Adwords API can be made via SOAP requests. For more complex data and calculations, the client libraries are more aptly suited.

This example does not use the sandbox. Calls to it will counts against the Adwords units. It also uses the latest version of the API, version v201003.

The requests require an authorization token which can be obtained via the ClientLogin method. Store this token in a session or application variable to prevent a CAPTCHA challend from Google for multiple authorization requests.

The Adwords API is called with an http post request to the appropriate service with the data request specified using SOAP.



	
		
            #application.adw_loginAuth#
            V2010 Get All Campaign Info
            ADWORDS-API-DEV-TOKEN
            CLIENT-EMAIL
        
    
    
    	
        	
            	
					
						
							20100101
							20100715
						
                        
						
                        ALL

Clicks and impressions are obtained using the campaign service. Data returned from the Adwords API is also in the SOAP format. After stripping the prefixes out of the SOAP response that will prevent the XMLSearch function in ColdFusion from working as expected, the data can be extracted and stored in variables and displayed.





	

	
        
           
           
        
        
    
        Google Authorization Failed.

Now the data can be extracted to an array using XMLSearch. Then put into an array of structures to make it easy to dump.






	 

    	
        
        
        
        

		
        
        




Total clicks: #totalClicks#

Total Impressions: #totalImpressions#

Code in its entirety:











   api = structnew();
   api.email = "GMAIL-ADDRESS-HERE";
   api.password = "GMAIL-PASSWORD";
   api.devtoken = "API-DEV-TOKEN";
   api.campaignService = "https://adwords.google.com/api/adwords/cm/v201003/CampaignService";
   api.clientEmail = "CLIENT-EMAIL-HERE";
   api.startDate = DateFormat(Now(), 'yyyymmdd');
   api.endDate = DateFormat(Now(), 'yyyymmdd');



	



        
        
        

        

        
            
            
            
            
            
        

        
        
            
			
		



	

	
        
           
           
        
        
    
        Google Authorization Failed.
        
    

    
    
    
    
    
    

    






Adwords API







	
		
            #application.adw_loginAuth#
            V2010 Get All Campaign Info
            #api.devtoken#
            #api.clientEmail#
        
    
    
    	
        	
            	
					
						
							#api.startDate#
							#api.endDate#
						
                        
						
                        ALL
						
						
					
            
        
    









	 

    	
        
        
        
        

		
        
        




Total clicks: #totalClicks#

Total Impressions: #totalImpressions#

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

No related posts.

Using jQuery Autocomplete to Populate Another Autocomplete – ASP.NET, ColdFusion, and PHP Examples

jen — Sat, 29 May 2010 20:41:53 +0000

As requested, this post covers using one jquery autocomplete to populate another jquery autocomplete on the same page. This example will use a jquery autocomplete to choose a state then, based on the state, another jquery autocomplete will be populated with zip codes for that state. Basically, the state chosen gets used as a filter in the query for the second autocomplete.

Form

The form for the examples is the same with fields for the autocompletes (state and zip_code) plus input fields for the values returned by the autocompletes.



jQuery UI Multi-Autocomplete Example
Start typing the name of a state or territory of the United States

State (abbreviation in separate field): 
 



Zip (only Zips from state selected above): 


City:

jQuery

The jquery is also the same for each example. Notice that the zip_code field is initially disabled to prevent entry before the results have been filtered.

Also, note that the source and secondary URL extension will have to be modified depending on the language you are using.

$(function() {

			//clear values on refresh
			$('#abbrev').val("");
			$('#city').val("");

			$("#zip_code").attr('disabled', true);

			$("#state").autocomplete({
				source: "states.[cfm|aspx|php]",
				minLength: 2,
				select: function(event, ui) {
					$('#state_id').val(ui.item.id);
					$('#abbrev').val(ui.item.abbrev);
					$("#zip_code").attr('disabled', false);
				},
				change: function(event, ui){
					secondary_url = "zips.[cfm|aspx|php]?filter=" + ui.item.abbrev;
					$("#zip_code").autocomplete("option", "source", secondary_url);
				}
			});

			$("#zip_code").autocomplete({
				source: "",
				minLength: 2,
				select: function(event,ui){
					$('#city').val(ui.item.city);
				}
			});

		});

Processing

Each programming language differs slightly in the processing. And, since there are hundreds of zip codes per state, the results are limited to 20. If the zip code desired is not returned in the top 20 after entering the minimum 2 characters, typing more characters will yield more precise results.

ASP.NET

Refer to the complete example of using the jquery autocomplete with ASP.NET for more information.

<%@ Page Language="VB" Debug="false" %>
<%@ Import Namespace="System.Web.Script.Serialization" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

Demo

ColdFusion

Refer to the complete example of using the jquery autocomplete with ColdFusion for more information.

ColdFusion’s serializeJSON function has an odd bug that will not let you send numbers as strings. This turns the zip codes into numbers which we do not want. To workaround this, I added a space in front of the zip code then removed it from the JSON output with the Replace function. Not the best idea, but it works.




	SELECT TOP 20 zip, city FROM zips WHERE abbrev = '#URL.filter#' AND zip like '#URL.term#%'



	
    
    
    
    

    




#Replace(serializeJSON(returnArray),'" ','"',"all")#

Demo

PHP

Refer to the complete example of using the jquery autocomplete with PHP for more information.

This PHP example using SQL Server as the database. The complete example linked above uses MySQL.

Demo

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

Generating Signatures in ColdFusion with RSA-SHA1 for Secure AuthSub in Google Analytics

jen — Sun, 16 May 2010 21:24:38 +0000

To send secure AuthSub requests to Google Analytics, you have to sign the request with a private key that is verified against the certificate you upload to Google. Google has a library where this can be done in Java that is specific to Google Analytics and, provided you can add .jar files to your ColdFusion server or use javaloader, you can run them using ColdFusion. If you need to roll your own or simply want to control the process, this example may help.

Before you implement any code that signs requests, the keys and certificate must be generated and then registered with Google you are attempting to access. Google has instructions on how to generate the keys and certificate using OpenSSL and how to register the certificate with Google. You will need the private key in the PKCS#8 format.

Google also supplies instructions for signing the AuthSub requests which is what we will step through here.

To get a single-use token for secure AuthSub, you send the user to authenticate through Google with a link similar to this:

Log in using Secure AuthSub through Google

Notice that secure is set to 1 indicating we want to send secure requests. Session is also set to 1 indicating we want a multi-use authorization token for multiple calls to the Google Analytics Data Export API. If you are only making one call to the API, you can set session to 0 (zero).

Google will then the user to your page designated by the next parameter with the token attached as a URL parameter called “token.” After getting this single-use token back from Google, you then need to send it back to Google to exchange for your multi-use token. This is where the signing begins. Every request from this point forward needs to be signed.

Secure AuthSub differs from AuthSub in that it requires several parameters to be added to the Authorization header of the request. They are:

token: single-use token (or multi-use token once you get it) from Google
sigalg: rsa-sah1
data: the http-method, request URL, timestamp, and nonce all separated by a space.
sig: the signature made by the private key generated against the data parameter above.

Generating this only requires a few lines of ColdFusion code:

The rsa_sha1 function creates the signature. It was written by Sharad Gupta and used here with permission.

The request for and parsing out of the multi-use token looks like this:


 


















If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.







Related posts:
ColdFusion and Google Analytics: Getting Out What You Put In
Hooking into Google Analytics with ColdFusion
Google Analytics API Login Authentication with ColdFusion

ColdFusion Session Timeout with Warning and jQuery Session Refresh

jen — Sun, 18 Apr 2010 19:05:08 +0000

There are times when a user needs to sit on a page for a while either to read or fill out a long form. If their visit is controlled by a session timeout, for example a member site, then the session needs to be refreshed without refreshing the page. My previous post on user session warning used a page refresh to renew the session. This example will refresh the session with a jquery .post so the browser maintains state.

Much of what happens here is very similar to the previous page reload session refresh so you will see some of the same explanatory text. Changes to the code mainly affect the jquery/javascript since the variables and timers need to be reset without refreshing the page.

Javascript is needed to keep track of the time the user has been sitting on the page. The server does not know how long they have been sitting there. It only knows whether or not a request comes in during a session or after the session has expired and acts accordingly at that time. Too late for a warning.

Session Defined: Start to Finish

A session is defined as when a user begins and ends using or visiting a web site. It can be unlimited in length or strictly defined by a timeout period. If the site requires a log in or accesses sensitive data, it should time out after a period of inactivity. They can end a session by logging out or closing the browser.

Inactivity means the user has done nothing, made no requests of the web server, during a specified time. Ajax requests usually do not count.

Demo

The session time left is determined by the server, and, if you want to poll the server with an Ajax request, go for it. Javascript is used to keep track of the time left in the session.

The demo uses a simple log in with session timing handled by jquery and javascript. When the session expiration approaches, the user is warned and given an opportunity to restart the session. If the session time limit is reached, the user is prompted to log in again. If they ignore that prompt, the page automatically redirects to the log in form. In the demo this sequence of events takes 40 seconds to complete and is broken down as follows:

Session timeout: 30 seconds
Timeout warning: 20 seconds
Session expired warning: 10 seconds
Redirect to log in page: 10 seconds

Interrupting the User

The user’s attention can be diverted away from other open windows to the eminent session expiration by using a javascript alert in place of the jquery dialog box. Personal preference.

Code Breakdown

The application.cfc controls the session by creating non-persistent cookies for CFID and CFTOKEN so the session expires when the user’s browser closes. It also sets the session variable sessionStartTime. The sessionStartTime variable is used to illustrate the fact that the application.cfc function OnSessionStart only fires once. It does not fire every time a session is renewed or restarted.

RequestStartTime is set in the OnRequestStart function to provide a reference for comparison later. See “Just for Fun” section below.

The log in page checks for a query string variable called ‘expired’ and, if present, deletes the session loggedin variable. This is there because the code is going to control the expiration of the session eliminating the need to compensate for browser latency. The actual session start time the time the page loads can differ by several seconds. To avoid having to add time to the session or any other fancy guesswork, when the allotted session time has expired according to the javascript timer on the page, they are done – session over.

If they are logged in, they get bumped to the index page. The rest is the logic that handles the log in form.

Note: I would not recommend handling a log in form this way. This is for demonstration only.

Other than the log in form and a message for the user, that’s all there is to the log in page.

Handling Session Timeout

The index page handles the session timeout code. This could be a separate javascript included in every page. The first block simply determines if they are logged in. If they are not, send them to the login page. If they are, load the index page.

Now the time variables are set and the a javascript timer is set to check the session every 10 seconds.
Javascript uses milliseconds so for clarity the time intervals multiply the number of seconds by 1,000. You could put 10000 in for 10 seconds but I think 10*1000 helps me determine that it is 10 seconds quite a bit faster. Do what is comfortable for you.

Also, a flag is set to determine if the warning dialog box has been opened and the countdown has begun.

//Your timing variables in number of seconds
//total length of session in seconds
var sessionLength = 30;
//time warning shown (10 = warning box shown 10 seconds before session starts)
var warning = 10;
//time redirect forced (10 = redirect forced 10 seconds after session ends)
var forceRedirect = 10; 

$(document).ready(function() {
	//event to check session time left (times 1000 to convert seconds to milliseconds)
    checkSessionTimeEvent = setInterval("checkSessionTime(requestTime)",10*1000);
});

//event to check session time variable declaration
var checkSessionTimeEvent = "";

//time session started
var requestTime = new Date();

//initial set of number of seconds to count down from for countdown ticker (10,9,8,7...you get the idea)
var countdownTime = warning;
//create event to start/stop countdownTicker
var countdownTickerEvent = ""; 

//initially set to false. if true - warning dialog open; countdown underway
var warningStarted = false;

function checkSessionTime(reqTime)
{
	//get time now
	var timeNow = new Date(); 

	//clear any countdownTickerEvents that may be running
	clearInterval(countdownTickerEvent);

	//difference between time now and time session started variable declartion
	var timeDifference = 0;

	//session timeout length
	var timeoutLength = sessionLength*1000;

	//set time for first warning, ten seconds before session expires
	var warningTime = timeoutLength - (warning*1000);

	//force redirect to log in page length (session timeout plus 10 seconds)
	var forceRedirectLength = timeoutLength + (forceRedirect*1000);

	timeDifference = timeNow - reqTime;

     if (timeDifference > warningTime && warningStarted === false)
        {
            //reset number of seconds to count down from for countdown ticker
			countdownTime = warning;

			//call now for initial dialog box text (time left until session timeout)
            countdownTicker(); 

            //set as interval event to countdown seconds to session timeout
            countdownTickerEvent = setInterval("countdownTicker()", 1000);

            $('#dialogWarning').dialog('open');
			warningStarted = true;
        }
    else if (timeDifference > timeoutLength)
    	{
    		//close warning dialog box if open
            if ($('#dialogWarning').dialog('isOpen')) $('#dialogWarning').dialog('close');

            $('#dialogExpired').dialog('open');

        }

     if (timeDifference > forceRedirectLength)
     	{
        	//clear (stop) checksession event
            clearInterval(checkSessionTimeEvent);

            //force relocation
            window.location="login.cfm?expired=true";
        }
}

The countdownTicker function provides a countdown inside the warning dialog box to prompt the user to act now. It uses a timer that fires every second for a 5,4,3,2,1 effect inside the dialog box.

function countdownTicker()
{
	//put countdown time left in dialog box
	$("span#dialogText-warning").html(countdownTime);

	//decrement countdownTime
	countdownTime--;
}

And, the dialog boxes either allow the user to restart the session or, if they did nothing when the warning popped up, it logs them out by redirecting to the log in page with the expired variable in the query string. Also, it redirects to the log in if they hit the close button on the dialog box rather than the Login button on the dialogExpired dialog box.

$(function(){
        // jQuery UI Dialog
        $('#dialogWarning').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            buttons: {
                "Restart Session": function() {
		   //reset session on server
                  $.post("restart_session.cfm");

		   //reset the variables
		   requestTime = new Date();
		   warningStarted = false;
		   countdownTime = warning;

		   //clear current checkSessionTimeEvent and start a new one
		   clearInterval(checkSessionTimeEvent);
		   checkSessionTimeEvent = "";
		   checkSessionTimeEvent = setInterval("checkSessionTime(requestTime)",10*1000);

		    $('#dialogWarning').dialog('close');
                }
            }
        });

        $('#dialogExpired').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            close: function() {
                   window.location="login.cfm?expired=true";
            },
            buttons: {
                "Login": function() {
                    window.location="login.cfm?expired=true";
                }
            }
        });
});

The “Restart Session” button sends a post request to a ColdFusion page that sets a session variable. That act alone refreshes the session.




session.RequestStartTime: #session.RequestStartTime# session.loggedin: #session.loggedin#

The dialog box contents are at the bottom of the page but they could be just about anywhere in the body.


 Your session has expired!


 Your session will expire in  seconds!

Just for Fun

You can view the response from the restrart_session.cfm in Firebug and compare it to the time on the page from the dumped session vars.

Usual recommended jQuery and CF reading:

Demo

Download zip of all files

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

jQuery UI Autocomplete Widget with ColdFusion

jen — Thu, 18 Mar 2010 19:58:35 +0000

You may also be interested in the jQuery UI Autocomplete Widget with PHP and MySQL or the jQuery UI Autocomplete Widget with ASP.NET VB post. Also, check out the Using jQuery Autocomplete to Populate Another Autocomplete post.

The jQuery UI folks have released an autocomplete widget that is pretty slick. Using it with ColdFusion is a snap. This example uses the serializeJSON function in ColdFusion 8. If you have an earlier version of CF, you will have to find a cfc that can build a JSON string for you. There are several freely available cfc’s that do it for you.

This example will use US states and territories to populate the autocomplete. It will also demostrate how to fill other fields with data returned from the database. This data can be used to fill a visible text box or a hidden form field. It also demonstrates the basic autocomplete functionality which may be fine for some applications.

Of course, you will need the jQuery core file, the jQuery UI core file, and the jQuery UI style sheet of choice. The style sheet comes from the themes available in the jQuery UI website and can be downloaded with the core file:

The HTML is straight forward and stripped down for the example:



jQuery UI Autocomplete Example - ColdFusion Backend
Start typing the name of a state or territory of the United States
State (abbreviation in separate field): 
	 
    
State (replaced with abbreviation):

As a bonus, we dump out the form values to see what we have right underneath the form itself:

And the jQuery on the page is equally brief:

$(function() {

            $('#abbrev').val("");

            $("#state").autocomplete({
                source: "states.cfm",
                minLength: 2,
                select: function(event, ui) {
                    $('#state_id').val(ui.item.id);
                    $('#abbrev').val(ui.item.abbrev);
                }
            });

            $("#state_abbrev").autocomplete({
                source: "states_abbrev.cfm",
                minLength: 2
            });
        });

Notice that there are two autocomplete functions on the page, one for each example in the demo. Each function calls a different ColdFusion file which return slightly different result sets.

Also, the minLength for autocomplete to return results is set to 2 to prevent too many rows from being returned.

Both ColdFusion pages return the data after a few steps:

It queries the database
Loops the query, adding each row to a structure that is appended to an array
Outputs the array as JSON data

The states.cfm file returns the id field, the state field as ‘label’, and the abbrev field. These values are placed in the appropriate text boxes by the autocomplete jQuery function.




    Select * from states where state like '%#URL.term#%'



    
    
    
    

    



#serializeJSON(returnArray)#

Unfortunately, the ColdFusion function serializeJSON does not put query results in the format that javascript likes. That’s why we have to do the hokey-pokey with the structure and array.

The states_abbrev.cfm shows the basic functionality of the autocomplete function by just assigning results of the query to the ‘label’ and ‘value’ fields. Explanation on the ‘label’ and ‘value’ fields from the jQuery UI site:

“The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.”




    Select * from state where state like '%#URL.term#%'



    
    
    

    



#serializeJSON(returnArray)#

Usual recommended jQuery and CF reading:

Demo

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

Passed the ColdFusion 8 Certification Exam

jen — Tue, 05 Jan 2010 19:10:40 +0000

Passed the ColdFusion 8 Certification Exam today. Scored a 95 and could not have done it without CF8 Exam Buster.

I have heard all the debate on whether or not to take the CF exam and I think most arguments against taking it are rubbish.

The real benefit of taking any exam is the fact that you get exposed to parts of the language that you never knew existed. Just studying for the exam helped me find tags, attributes, and functions I wouldn’t even have thought to look for. And, if you are a freelancer, it can only help to have this credential.

So, if you can pony up the $150 for the test and the $40 for Exam Buster, there is no reason why you shouldn’t take the exam. Just go through the Exam Buster tests until you consistently score in the 90′s and you are a lock to pass.

No related posts.

ColdFusion and Google Analytics: Getting Out What You Put In

jen — Sun, 20 Dec 2009 03:43:27 +0000

The Hooking into Google Analytics post details how to connect to the Data Export API of Google Analytics (GA) and get a simple visitors count in return. Here we will expand greatly on that and create a cfc that will process just about any result from the API.

This code requires at least ColdFusion 8.0.1. Check your version before installing.

An auth token is needed for requests to the API and two ways to do that are the AuthSub and ClentLogin methods. The method used is up to the developer as once the auth token is retrieved and set into session, data calls to the API can be repeatedly made.

To retrieve the profile or data feed, a call is made to the API via a function.

   
        
        

        

        

        
            
        

        
        
         
         ]*>","") />

Next, a list of the profiles (websites) that the user has access to are retrieved by requesting an account feed. If the user has only one profile associated with their credentials, the data is displayed immediately. If they have more than one, they are presented with a select box to select the profile they want data from.

A default date range of one year is set initially. A dialog box that allows the user to change the date range is presented as an option. The date range is limited to a max date of yesterday because GA does not have full data for the current day. This causes the averages that are calculated on the return data to be skewed.

A data feed request url is sent to GA along with the auth token a via cfhttp tag.

Once the data is in a form you can manipulate, graphs, tables, and charts of all kinds can be made.

ClientLogin, AuthSub, and Secure AuthSub authentication examples are included in the demo. ClientLogin recommended only for client apps. Google notice on using ClientLogin:

“Important: Do not use ClientLogin if you are writing an application that runs on
your computer to make requests on behalf of 3rd party end users. Instead, use either
AuthSub or OAuth, which protects end users’ private data. Because ClientLogin stores
the user login data, it should only be used in cases where that data is under the
direct control of the user (e.g. their personal computer).”

ColdFusion cfgrid Selected Row Disappearing / Blank in IE

jen — Wed, 28 Oct 2009 13:45:06 +0000

After selecting a row in cfgrid in Internet Explorer, the selected row goes blank or all white. The data is still there and the row is selected, you just can’t tell.

The problem lies in a css file that ColdFusion uses for the cfgrid. According to some other posts on the web, there is some incorrectly commented out css rules. They are commented out with ‘//’ rather than ‘/*…*/’. The file is ext-all.css and on my set up with IIS, I found it at C:\Inetpub\wwwroot\CFIDE\scripts\ajax\resources\ext\css\ext-all.css.

When the comments are correctly marked up, it got better (the text showed up) but the background color did not behave even though I specified the select background color in the cfgrid attributes with selectColor=”#FF3300″. BTW, the selectColor worked for FireFox, IE didn’t seem to care.

My solution (although imperfect) was to edit the ext-all.css by properly commenting out the bad comments and adding my own background color for the selected td. It’s imperfect because it overrides the selectColor in FireFox.

.x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{
	background-color: #316ac5; /* added */
	/*color: white;*/
}

.x-grid-row-selected span, .x-grid-row-selected b, .x-grid-row-selected div, .x-grid-row-selected strong, .x-grid-row-selected i{
	color:white !important;
}

.x-grid-row-selected .x-grid-cell-text{
	/*color: white;*/
}

.x-grid-cell-selected{
	/*color: white;*/
}

.x-grid-cell-selected span{
	/*color: white !important;*/
}

.x-grid-cell-selected .x-grid-cell-text{
	/*color: white;*/
}

Hope this helps someone else and I hope Adobe fixes it.

No related posts.

jQuery.ajax and jQuery.post Form Submit Examples with ColdFusion

jen — Fri, 23 Oct 2009 13:17:30 +0000

This is the same as the previous jquery form submit post that used PHP just flavored with CF this time.

Two jQuery functions that allow for the submission of form are the jQuery.ajax function and the jQuery.post function (there is also jQuery.get but that is not addressed here).

More functionality, along with more complexity, is offered with the .ajax function while the .post function, with its more simple functionality and implementation, will be all that is needed for simple form posts.

It is highly recommended that you get a tool like Firebug to see the post response coming back from the page. It helps immensely.

Here is an example of both in action doing the same thing: form submit with email validation.

jQuery.ajax

The form:



jQuery.ajax Form Submit
Name:


E-mail:

Pretty simple, nothing fancy. There is a form for each jQuery function, .ajax and .post. The only difference in the forms are the element names.

jQuery controls the submit for the forms. For the .ajax submission the jQuery is this:

$(function(){
    $("#JqAjaxForm").submit(function(){
        dataString = $("#JqAjaxForm").serialize();

        $.ajax({
        type: "POST",
        url: "process_form.cfm",
        data: dataString,
        dataType: "json",
        success: function(data) {

            if(data.email_check == "invalid"){
                $("#message_ajax").html("Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.");
            } else {
                $("#message_ajax").html("" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".");
            }

        }

        });

        return false;            

    });
});

The .serialize function is used to put the form data in a format that can be processed by a page on the server. The .ajax function options include:

type: “get” or “post”
url: the page to receive the form data
data: the form data itself
dataType: the data type the function should expect back from the server
success function: runs on a succesful post to the page

More information on the options and further explanations of the options used here can be found on the jQuery.ajax documentation page.

jQuery.post

As in the .ajax example, the form is simple, only the names have been changed:



jQuery.post Form Submit
Name:


E-mail:

And again, jQuery controls the submit for the forms. For the .post submission the jQuery is this:

$(function(){
    $("#JqPostForm").submit(function(){
        $.post("process_form.cfm", $("#JqPostForm").serialize(),
        function(data){
            if(data.email_check == 'invalid'){

                    $("#message_post").html("Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.");
            } else {
                $("#message_post").html("" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".");
                }
        }, "json");

        return false;

    });
});

jQuery.post is a shorter, easier way to post the form data. The function arguments are:

url of the form processing page
the form data
the callback function
the data type of the return data

More information can be found on the jQuery.post documentation page.

Processing the Form

Both methods are processed by the same page. It processes the form data, process_form.cfm in this example, by checking to see if the e-mail submitted is valid. Much more than that could be done on the page if needed.






   

    





	
	

	
	


	
	

	
	




#serializeJSON(return_struct)#

This code puts the results of the e-mail validation and the form data in a JSON-formatted string. It then will output the return data string which is picked up by the success function in the .ajax function or the function(data) function in the .post function on the original page.

I prefer working with JSON, but there are other options for the return data. Check the jQuery documentation for the types available to you.

The JSON response will look like this:

{"email_check":"valid","name":"Julia","email":"julia@example.com"}

NOTE: If you have ColdFusion 8 or better use the serializeJSON function. This function can return query results, arrays, dates, strings, and the like to JSON which is easily consumed and digested by javascript. Pre-CF 8 will require building the JSON string manually but with some loops and other creativity, it can be done.

The appropriate message based on the e-mail validation check is then displayed.

Pretty simple, pretty handy couple of jQuery functions. Once you see it in action, you get the idea.

Usual recommended jQuery and CF reading:

Demo

Download zip of all files

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

ColdFusion Example: Session Timeout Warning with jQuery/JS

jen — Sat, 12 Sep 2009 18:57:58 +0000

You may also be interested in the post on refreshing session without reloading page with ColdFusion. Updated 11-Jan-2010: Improved ability to adjust timeouts and simplified code a bit.

I wrote a post on session timeout warnings with PHP; here’s a version with ColdFusion. Some of the text is the same because the method and principles are the same for both languages.

Session Defined: Start to Finish

Inactivity means the user has done nothing, made no requests of the web server, during a specified time. Ajax requests usually do not count.

Demo

The session time left is determined by the server, and, if you want to poll the server with an Ajax request, go for it. Javascript is used to keep track of the time left in the session.

Session timeout: 30 seconds
Timeout warning: 20 seconds
Session expired warning: 10 seconds
Redirect to log in page: 10 seconds

Interrupting the User

The user’s attention can be diverted away from other open windows to the eminent session expiration by using a javascript alert in place of the jquery dialog box. Personal preference.

Code Breakdown

If they are logged in, they get bumped to the index page. The rest is the logic that handles the log in form.

Note: I would not recommend handling a log in form this way. This is for demonstration only.

Other than the log in form and a message for the user, that’s all there is to the log in page.

Handling Session Timeout

Also, a flag is set to determine if the warning dialog box has been opened and the countdown has begun.

//event to check session time variable declaration
var checkSessionTimeEvent = 0;

$(document).ready(function() {
	//event to check session time left (times 1000 to convert seconds to milliseconds)
    checkSessionTimeEvent = setInterval("checkSessionTime()",10*1000);
});

//Your timing variables in number of seconds

//total length of session in seconds
var sessionLength = 30;
//time warning shown (10 = warning box shown 10 seconds before session starts)
var warning = 10;
//time redirect forced (10 = redirect forced 10 seconds after session ends)
var forceRedirect = 10; 

//time session started
var requestTime = new Date();

//session timeout length
var timeoutLength = sessionLength*1000;

//set time for first warning, ten seconds before session expires
var warningTime = timeoutLength - (warning*1000);

//force redirect to log in page length (session timeout plus 10 seconds)
var forceRedirectLength = timeoutLength + (forceRedirect*1000);

//set number of seconds to count down from for countdown ticker
var countdownTime = warning;

//warning dialog open; countdown underway
var warningStarted = false;

The checkSessionTime function is what gets fired off every 10 seconds by the timer. It does a time comparison and opens the dialog boxes that warn the user.

function checkSessionTime()
{
	//get time now
	var timeNow = new Date(); 

	//event create countdown ticker variable declaration
	var countdownTickerEvent; 	

	//difference between time now and time session started variable declartion
	var timeDifference = 0;

	timeDifference = timeNow - requestTime;

    if (timeDifference > warningTime && warningStarted === false)
        {
            //call now for initial dialog box text (time left until session timeout)
            countdownTicker(); 

            //set as interval event to countdown seconds to session timeout
            countdownTickerEvent = setInterval("countdownTicker()", 1000);

            $('#dialogWarning').dialog('open');
            warningStarted = true;
        }
    else if (timeDifference > timeoutLength)
    	{
    		//close warning dialog box
            if ($('#dialogWarning').dialog('isOpen')) $('#dialogWarning').dialog('close');

            $('#dialogExpired').dialog('open');

            //clear (stop) countdown ticker
            clearInterval(countdownTickerEvent);
        }

     if (timeDifference > forceRedirectLength)
     	{
        	//clear (stop) checksession event
            clearInterval(checkSessionTimeEvent);

            //force relocation
            window.location="login.cfm?expired=true";
        }
}

The countdownTicker function provides a countdown inside the warning dialog box to prompt the user to act now. It uses a timer that fires every second for a 5,4,3,2,1 effect inside the dialog box.

function countdownTicker()
{
	//put countdown time left in dialog box
	$("span#dialogText-warning").html(countdownTime);

	//decrement countdownTime
	countdownTime--;
}

And, the dialog boxes either allow the user to reload the page or, if they did nothing when the warning popped up, it logs them out by redirecting to the log in page with the expired variable in the query string. Also, thanks to scube’s debugging, it now redirects to the log in if they hit the close button on the dialog box rather than the Login button.

$(function(){
                // jQuery UI Dialog
                $('#dialogWarning').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
		    close: function() {
                            window.location="login.php?expired=true";
                     },
                    buttons: {
                        "Restart Session": function() {
                            location.reload();
                        }
                    }
                });

                $('#dialogExpired').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Login": function() {
                            window.location="login.cfm?expired=true";
                        }
                    }
                });
});

The dialog box contents are at the bottom of the page but they could be just about anywhere in the body.


 Your session has expired!


 Your session will expire in  seconds!

Remember, this is just one example. There are other ways to do this. Use this, improve this, or roll your own.

Usual recommended jQuery and CF reading:

Demo

Download

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

jensbits.com » ColdFusion

Clicks and Impressions from Google Adwords API using ColdFusion

Using jQuery Autocomplete to Populate Another Autocomplete – ASP.NET, ColdFusion, and PHP Examples

Form

jQuery

Processing

ASP.NET

ColdFusion

PHP

Generating Signatures in ColdFusion with RSA-SHA1 for Secure AuthSub in Google Analytics

ColdFusion Session Timeout with Warning and jQuery Session Refresh

Session Defined: Start to Finish

Demo

Interrupting the User

Code Breakdown

Handling Session Timeout

Just for Fun

jQuery UI Autocomplete Widget with ColdFusion

Passed the ColdFusion 8 Certification Exam

ColdFusion and Google Analytics: Getting Out What You Put In

Recommended Reading

ColdFusion cfgrid Selected Row Disappearing / Blank in IE

jQuery.ajax and jQuery.post Form Submit Examples with ColdFusion

jQuery.ajax

jQuery.post

Processing the Form

ColdFusion Example: Session Timeout Warning with jQuery/JS

Session Defined: Start to Finish

Demo

Interrupting the User

Code Breakdown

Handling Session Timeout