jensbits.com

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.

Google Analytics Data Export API with Google Chart Visualizations

jen — Wed, 23 Jun 2010 06:45:54 +0000

You can punch into the Google Analytics Data Export API, pull out some stats, and stuff them into some nice graphical charts using Google Chart Visualizations. This demo is done in PHP.

Authenticate the User

The user can authenticate via the ClientLogin or using the AuthSub login which is actually more secure. For the ClientLogin, a typical username/password form is used. For the AuthSub login a link is used to send the user to Google to log in. Both are shown below. Normally you would use one or the other.

Or,authenticate using AuthSub through Google.

And, of course, the two authentication methods use different http calls to return a token that can be used to access the API.

//ClientLogin: try to log in and get session token for multiple API calls
if(isset($_POST['email']) && isset($_POST['password'])){
	$_SESSION['sessionToken'] = googleLogin($_POST['email'],$_POST['password']);
}
//AuthSub: exchange token for session token so multiple calls can be made to api
if(isset($_REQUEST['token'])){
	$_SESSION['authSub'] = true;
	$_SESSION['sessionToken'] = get_session_token($_REQUEST['token']);
}

//returns sessionToken for multiple calls to API
function googleLogin($email,$passwd){

    $clientlogin_url = "https://www.google.com/accounts/ClientLogin";
     $clientlogin_post = array(
    "accountType" => "GOOGLE",
    "Email" => $email,
    "Passwd" => $passwd,
    "service" => "analytics",
    "source" => "my-analytics"
	);

	$curl = curl_init($clientlogin_url);

	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_POSTFIELDS, $clientlogin_post);
	curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

	$response = curl_exec($curl);

	preg_match("/Auth=([a-z0-9_\-]+)/i", $response, $matches);
	$sessionToken = $matches[1];

	if (strlen($sessionToken) == 0){
		$sessionToken = "Authentication Failed.";
	}

 	return $sessionToken;
}

//AuthSub returns session token for multiple calls to API
	function get_session_token($onetimetoken) {
		$output = call_api($onetimetoken, "https://www.google.com/accounts/AuthSubSessionToken");

		if (preg_match("/Token=(.*)/", $output, $matches))
		{
			$sessionToken = $matches[1];
		} else {
			echo "Error authenticating with Google.";
			exit;
		}

		return $sessionToken;
	}

Data Requests

Once authenticated to a Google Analytics account and a multi-use session token is acquired, the data requests can be made. The first one will request the profiles (websites) associated with the account. If there is more than one, a dropdown select is populated allowing for the selection of the profile from which to pull data.

$accountxml = call_api($_SESSION['sessionToken'],"https://www.google.com/analytics/feeds/accounts/default");
// Get an array with the available accounts
$profiles = parse_account_list($accountxml);

The call_api function is going to return the XML data from Google based on the request URL sent in. In this case, it is getting the profile data and the parse_account_list function is rolling through that XML and putting the profile data in an array.

//gets the data
function call_api($sessionToken,$url){
	$curl = curl_init($url);

	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	if (isset($_SESSION['authSub'])){
		$curlheader[0] = sprintf("Authorization: AuthSub token=\"%s\"/n", $sessionToken);
	} else {
		$curlheader[0] = "Authorization: GoogleLogin auth=" . $sessionToken;
	}
	curl_setopt($curl, CURLOPT_HTTPHEADER, $curlheader);

	$response = curl_exec($curl);
	curl_close($curl);

	return $response;
}

//returns accounts list as array
function parse_account_list($xml){
	$doc = new DOMDocument();
	if(stripos($xml,"<") !== FALSE)
	{
		$doc->loadXML($xml);

		$entries = $doc->getElementsByTagName('entry');
		$i = 0;
		$profiles= array();
		foreach($entries as $entry)
		{
			$profiles[$i] = array();

			$title = $entry->getElementsByTagName('title');
			$profiles[$i]["title"] = $title->item(0)->nodeValue;

			$entryid = $entry->getElementsByTagName('id');
			$profiles[$i]["entryid"] = $entryid->item(0)->nodeValue;

			$tableId = $entry->getElementsByTagName('tableId');
			$profiles[$i]["tableId"] = $tableId->item(0)->nodeValue;

			$i++;
		}
		return $profiles;
	} else {
		$sessionToken = "Authentication Failed.";
	}

}

The dropdown of the profile array:

echo "Select Site:";

The parse_data function below is going to roll through the data returned from Google Analytics and spit out an array that can be used to create the Google Visualization graphs.

//returns data as array
function parse_data($xml){
		$doc = new DOMDocument();
		$doc->loadXML($xml);

		$entries = $doc->getElementsByTagName('entry');
		$i = 0;
		$results = array();
		foreach($entries as $entry)
		{
			$countries[$i] = array();

			$dimensions = $entry->getElementsByTagName('dimension');
			foreach($dimensions as $dimension)
			{
				$results[$i][ltrim($dimension->getAttribute("name"),"ga:")] =  $dimension->getAttribute('value');
			}

			$metrics = $entry->getElementsByTagName('metric');
			foreach($metrics as $metric)
			{
				$results[$i][ltrim($metric->getAttribute('name'),"ga:")] =  $metric->getAttribute('value');
			}

			$i++;
		}
		return $results;
}

Graph Generation

Google Visualizations requires the inclusion of a javascript file in the head tag and empty div’s that will be the target for the graphs:

The target div’s should be placed on the page where you want them to appear.

Finally, the data can be added to the chart generation javascript:

jQuery Modal Dialog Close on Overlay Click

jen — Wed, 16 Jun 2010 15:03:51 +0000

You may want a modal dialog to close if the overlay is clicked on the page. One way of doing that is to bind a click event to the document and fire it only when the dialog box does not have focus.

This example uses a variable that is flipped back and forth depending on whether or not the dialog box had regained focus. When the dialog box gains focus, the closedialog variable is set to 0 (zero) to prevent the dialog.close method in the overlayclickclose function from being called. The overlayclickclose function is bound to the click event of the document.

The closedialog variable is also set to 1 (one) in the overlayclickclose function so that it will fire when there is a click outside the dialog box.

The dialog box open and close events bind and unbind the click event to the document so that it is only bound when the dialog box is open.

			   var closedialog;

			   function overlayclickclose() {
					if (closedialog) {
						$('#mydialog').dialog('close');
            		}
					//set to one because click on dialog box sets to zero
					closedialog = 1;
        		}

			$('#mydialog').dialog({
				bgiframe: true,
				autoOpen: true,
				modal: true,
				width: 500,
				resizable: false,
				open: function(){closedialog = 1;$(document).bind('click', overlayclickclose);},
				focus: function(){closedialog = 0;},
				close: function(){$(document).unbind('click');},
				buttons: {
					Submit: function(){
						$(this).dialog('close');
					}
				}
			});

		$('#opendialog').click(function() {
                       $('#mydialog').dialog('open');
                       closedialog = 0;
            });

The html for the dialog box includes a couple of radio buttons and a submit button just for demonstration. They do not really do anything in this example. Below is the complete code example.





Close Dialog on Overlay Click











Close Dialog on Overlay Click Test page
Dialog will close if overlay is clicked but not if anything inside of dialog is clicked.
Open dialog

		Demo of overlay close on click. Submit button will close dialog and nothing else.
		
        Pink or blue?

		Pink

        Blue
        Soccer or futbol?

		Soccer

        Futbol

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 ASP.NET VB

jen — Thu, 15 Apr 2010 01:00:23 +0000

You might also be interested in the Using jQuery Autocomplete to Populate Another Autocomplete post.

As a follow up to the jQuery UI Autocomplete Widget with ColdFusion and the jQuery UI Autocomplete Widget with PHP posts, I did one with ASP.NET (VB.NET) as the backend. I swear this is the last one I’m doing. I’m running out of languages that I work in.

The jQuery UI folks have released an autocomplete widget that is pretty slick. This example uses the JavaScriptSerializer() function in .NET 3.5. I heard a rumor .NET 4 might make this json encoding with data easier. We’ll see.

This example will use US states and territories to populate the autocomplete. It will also demonstrate 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 - ASP.NET VB 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:

Sub Page_Load(Source As Object, E As EventArgs)
 	Dim formfields As String = "" 

     For Each sItem In Request.Form
	 	formfields = formfields + "" + sItem + " = " +  Request.Form(sItem) + "
"
  	Next
	formoutput.Text = formfields + ""
 End Sub

And the jQuery on the page is equally brief:

$(function() {

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

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

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

Notice that there are two autocomplete functions on the page, one for each example in the demo. Each function calls a different aspx 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 .NET pages return the data after a few steps:

It creates a new javascript serializer
It creates an object to hold the data from each returned row in the query
It queries the database and fills a dataset (keep reading if you like readers better)
Loops an array of the query results adding each row to an object
Adds the object to an ArrayList
Outputs the ArrayList as JSON data

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

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

If you prefer to use a reader, just substitute the code below for the dataset code above.

        Dim command As New SqlCommand(mySql, objConn)
        Dim reader As SqlDataReader = command.ExecuteReader()

        While reader.Read()
            Dim st As New State()
            st.id = reader("id").ToString()
            st.value = reader("state").ToString()
            st.abbrev = reader("abbrev").ToString()
            stateArray.Add(st)
        End While

        reader.Close()

The states_abbrev.aspx 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.”

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

Again, if you prefer to use a reader, here you go:

       Dim command As New SqlCommand(mySql, objConn)
        Dim reader As SqlDataReader = command.ExecuteReader()

        While reader.Read()
            Dim st As New State()
            st.label = reader("state").ToString()
            st.state = reader("abbrev").ToString()
            stateArray.Add(st)
        End While

        reader.Close()

Usual recommended jQuery and .NET 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.

jQuery UI Autocomplete Widget with PHP and MySQL

jen — Tue, 30 Mar 2010 02:31:43 +0000

You might also be interested in the Using jQuery Autocomplete to Populate Another Autocomplete post.

As a follow up to the jQuery UI Autocomplete Widget with ColdFusion post, I did one with PHP as the backend.

The jQuery UI folks have released an autocomplete widget that is pretty slick. This example uses the json_encode function in PHP 5. If you have an earlier version of PHP, you will have to roll your own JSON string.

This example will use US states and territories to populate the autocomplete. It will also demonstrate 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.

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



jQuery UI Autocomplete Example - PHP 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:

";
	while (list($key,$value) = each($_POST)){
	echo "" . $key . " = ".$value."
";
	}
echo "";
}
?>

And the jQuery on the page is equally brief:

$(function() {

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

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

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

Notice that there are two autocomplete functions on the page, one for each example in the demo. Each function calls a different PHP 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 PHP pages return the data after a few steps:

It queries the database
Loops an array of the query results adding each row to a return array
Outputs the array as JSON data

The states.php file returns the id field, the state field as ‘value’, and the abbrev field. These values are placed in the appropriate text boxes by the autocomplete jQuery function. And, of course, you will have to make your own connection to your MySQL database before running the query.

$return_arr = array();

$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);

/* If connection to database, run sql statement. */
if ($conn)
{
	$fetch = mysql_query("SELECT * FROM states where state like '%" . $_GET['term'] . "%'"); 

	/* Retrieve and store in array the results of the query.*/

	while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
		$row_array['id'] = $row['id'];
		$row_array['value'] = $row['state'];
		$row_array['abbrev'] = $row['abbrev'];

        array_push($return_arr,$row_array);
    }

}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

The states_abbrev.php 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:

$return_arr = array();

/* If connection to database, run sql statement. */
if ($conn)
{
	$fetch = mysql_query("SELECT * FROM states where state like '%" . $_GET['term'] . "%'"); 

	/* Retrieve and store in array the results of the query.*/

	while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
		$row_array['label'] = $row['state'];
		$row_array['value'] = $row['abbrev'];

        array_push($return_arr,$row_array);
    }

}
/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

Usual recommended jQuery and PHP 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.

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:




    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.

CreateUserWizard Set Email as Username VB.NET 3.5

jen — Fri, 05 Mar 2010 14:00:57 +0000

Commonly, a login username is the individual’s email address. If you have used the CreateUserWizard in ASP.NET 3.5, you know that the username field and the email field are separate fields. Username is required by the wizard and email is not. If you want to populate the email field in the database with the username field, it is not obvious on the surface how to do it. Fortunately, it’s just some minor mods to the web.config and the aspx page.

web.config

In the web.config file, you will add requiresUniqueEmail=”false” to the membership provders add entry. Below is a stripped down example.

aspx page

On the aspx page itself, you will add RequireEmail=”false” so the email textbox is not mandatory and a call to a function in the OnCreatedUser event to the CreateUserWizard. Also, some validation is added to the username field to ensure that it is in a valid email format.

The function fires right after the user is created and updates the email field with the username.

Protected Sub CreateUserWizard1_CreatedUser(ByVal sender As Object, ByVal e As EventArgs)
        Dim userNameTextBox As TextBox = CType(CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName"), TextBox)
        Dim user As MembershipUser = Membership.GetUser(userNameTextBox.Text)

        user.Email = user.UserName
        Membership.UpdateUser(user)
    End Sub

No related posts.

jensbits.com

Clicks and Impressions from Google Adwords API using ColdFusion

Google Analytics Data Export API with Google Chart Visualizations

Authenticate the User

Data Requests

Graph Generation

Recommended

jQuery Modal Dialog Close on Overlay Click

Close Dialog on Overlay Click Test page

Recommended:

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 ASP.NET VB

jQuery UI Autocomplete Widget with PHP and MySQL

jQuery UI Autocomplete Widget with ColdFusion

CreateUserWizard Set Email as Username VB.NET 3.5

web.config

aspx page