web.config

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

 <membership defaultProvider="MyMembership">
      <providers>
        <add name="MyMembership" type="System.Web.Security.SqlMembershipProvider" connectionStringName="MyConnectionString" requiresUniqueEmail="false" />
        </providers>
 </membership>

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.

<asp:CreateUserWizard ID="CreateUserWizard1" OnCreatedUser="CreateUserWizard1_CreatedUser" RequireEmail="false" Runat="server">

<asp:TextBox ID="UserName" Width="200" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="E-mail is required."ValidationGroup="CreateUserWizard1" />

<asp:RegularExpressionValidator ID="regEmail" ControlToValidate="UserName" Text="Invalid e-mail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Runat="server" />

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

Google posted a 2-minute video on Google Docs form creation that pretty much sums it up. This has actually been around for a couple of years now but, even though it’s a little late to the party, here is a quick illustration of my jQuery poll done with Google Docs:

Select “Form” from the “Create New” menu.

Fill in the name of the poll or form, short description, and the first question.

Add a question by clicking the “Add Item” button and choose from the menu items. Under “More Actions” you can create the confirmation message and allow the submitters to see the results.

You can also get the embed link for putting the poll right on a web page.

And, you can email the form and have users submit answers right from their email by hitting the “Email this form” button and adding the email addresses.

Here it is in all it’s embedded goodness. Try it out:

GA offers two tracking code snippets for you to choose from: traditional (synchronous) and asynchronous.

First, a short review of the basic installation for both the traditional and the asynchronous:

Basic Tracking Code Installation

Traditional (Synchronous) Tracking Code

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>

Traditional (synchronous) basic installation is done by placing the above GA tracking code, after replacing “UA-xxxxxx-x” with your account number, before the closing body (</body>) tag on all pages of your site. This placement is supposed to decrease the likelihood that it will interfere with other javascript on your page.

The drawbacks with this installation include increased page load time and the possibility it won’t run at all if the user clicks away from the page before it fully loads.

More on the traditional tracking code installation from Google.

Asynchronous Tracking Code

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

Asynchronous basic installation is done by placing the above GA tracking code, after replacing “UA-xxxxxx-x” with your account number, before the closing head (</head>) tag on all pages of your site. Like the traditional code, this placement is meant to decrease the likelihood that it will interfere with other javascript on your page.

According to Google, the asynchronous code has the following advantages:

• Faster tracking code load times for your web pages due to improved browser execution
• Enhanced data collection and accuracy
• Elimination of tracking errors from dependencies when the JavaScript hasn’t fully loaded

More on the asynchronous tracking code installation from Google.

Third-Party Shopping Cart (Cross-Domain) Tracking

It is essential that your GA tracking code is installed correctly for this to work properly.

GA tracks with first-party cookies. If you do not install this correctly, the cookies will be set incorrectly, have the wrong data in them, or both. More on this later…

Traditional (Synchronous) Tracking Code

Put the following code, replacing “UA-xxxxxx-x” with your account number, on ALL pages of your site and the shopping cart pages anywhere between the body tags but ABOVE any calls to pageTracker:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
</script>

Links to the shopping cart when adding items to the cart, for example, must include onclick="pageTracker._link(this.href); return false;"

Forms that submit to the shopping cart must include onsubmit="pageTracker._linkByPost(this)"

Do not forget to put that on ALL forms if checkout is a multi-form (multi-step) process. Your data will be incorrect if you do not do this.

If your third-party cart already includes built-in GA code, follow their instructions exactly.

More on the traditional code installation of third-party shopping cart tracking from Google.

Asynchronous Tracking Code

Put the following code, replacing “UA-xxxxxx-x” with your account number, on ALL pages of your site and the shopping cart pages just above the closing head (</head>) tag:

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxx-x']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

Links to the shopping cart when adding items to the cart, for example, must include onclick="_gaq.push(['_link', 'https://your-cart.com/cart.html']); return false;"

Replace “https://your-cart.com/cart.html” with the actual link to your cart.

Forms that submit to the shopping cart must include onsubmit='_gaq.push(['_linkByPost', this]);'

Do not forget to put that on ALL forms if checkout is a multi-form (multi-step) process. You will data will be incorrect if you do this incorrectly.

Do not add the asynchronous tracking to third-party cart that have their own GA solution built-in unless specifically instructed to do so.

More on the asynchronous code installation of third-party shopping cart tracking from Google.

Why It’s Important to Do This Correctly

The cookies set by GA when the setDomainName parameter is set to “none” may in some cases have different HOST setting. That is, it may have a www.mydomain.com when the original code without the setDomainName may set HOST to just .mydomain.com. Or, worse still, you could lose all the visitor data and have the sale appear to have been referred from your site and nothing else.

This results in bad data coming into GA particularly in the referrer area. It probably disassociates your keywords to your sales as well.

Recommended Reading

If this post helped you out, please consider donating to help pay the hosting fees.

Pop-up Behavior

1. Pop-up survey opens no matter what page of the website the user enters.
2. Cookie is set when survey submitted or user opts out (“No, thanks” click).
3. Closing dialog will not set cookie

All survey data is stored in a database and jQuery .post is used to shuttle the information back and forth.

Code for the survey dialog:

<div id="survey" title="Pop-Up Survey">
	<p id="surveyDenied"><a href="#">No, thanks</a></p>
		<p>Pop-up survey that cookies browser on completion or on opt-out. Short 411 demo survey.</p>
		<form id="popup_survey" name="popup_survey" method="post">
        <p><strong>Pink or blue?</strong><br />
		<input id="pink" type="radio" name="radio_color" value="pink"  />Pink<br />
        <input id="blue" type="radio" name="radio_color" value="blue"  />Blue</p>
        <p><strong>Soccer or futbol?</strong><br />
		<input id="soccer" type="radio" name="radio_sport" value="soccer"  />Soccer<br />
        <input id="futbol" type="radio" name="radio_sport" value="futbol"  />Futbol</p>
        </form>
	<div id="error_message"></div>
</div>

It’s just a couple of radio buttons and a place for an error message. The submit is handled by the dialog button.

Here is the survey dialog code:

$(function(){
			$('#survey').dialog({
				bgiframe: true,
				autoOpen: false,
				modal: true,
				width: 500,
				resizable: false,
				buttons: {
					Submit: function(){
						if($("input[name='radio_color']:checked").val() !== undefined && $("input[name='radio_sport']:checked").val() !== undefined){
							setCookie('POPsurvey','POPsurvey',30);
							$.post("process_survey.php", $("#popup_survey").serialize(),
							function(data){
								if(data.db_check == 'fail'){
									$("#error_message").html("<p>Database not available. Please try again.</p>");
								} else {
									$("div.pink").css("width",data.perPink);
									$(".perPink").html(data.perPink + "% (" + data.totalPink + ")");

									$("div.blue").css("width",data.perBlue);
									$(".perBlue").html(data.perBlue + "% (" + data.totalBlue + ")");

									$("div.soccer").css("width",data.perSoccer);
									$(".perSoccer").html(data.perSoccer + "% (" + data.totalSoccer + ")");

									$("div.futbol").css("width",data.perFutbol);
									$(".perFutbol").html(data.perFutbol + "% (" + data.totalFutbol + ")");

									$(".totalRes").html(data.totalRes);

									$('#survey').dialog('close');
									$('#survey_thanks').dialog('open');
								}
								}, "json");
						}else{
							$("#error_message").html("<p>Please answer all questions.</p>");
						}
					}
				}
			});
		});

Lots of stuff but it does several things. First, on submit, it checks that the user answered both questions. Then it sets the cookie. And, finally, it sends the form data off via post and puts the response in elements on the page that are part of the “Thank you” dialog. Speaking of which…

The “Thank you” dialog code is thus:

<div id="survey_thanks" title="Pop-Up Survey - Thank You!">
    <p>Thank you for taking the time to answer our survey. Your input will help us improve the site.</p>
    <p>Responses: <span class="totalRes"></span></p>

    <div class="progress-container">
        pink <span class="perPink"></span>
        <div class="pink"></div>
        blue <span class="perBlue"></span>
        <div class="blue"></div>
    </div>

    <div class="progress-container">
        soccer <span class="perSoccer"></span>
        <div class="soccer"></div>
        futbol <span class="perFutbol"></span>
        <div class="futbol"></div>
    </div>
</div>

$(function(){
			$('#survey_thanks').dialog({
				bgiframe: true,
				autoOpen: false,
				modal: true,
				width: 500,
				resizable: false,
				buttons: {
					Close: function(){
						$(this).dialog('close');
						}
					}
			});
		});

Cookies

The code to handle setting, checking, and deleting cookies is standard javascript:

function setCookie(c_name,value,expiredays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
} 

function getCookie(c_name)
{
	if (document.cookie.length>0)
	  {
	  c_start=document.cookie.indexOf(c_name + "=");
	  if (c_start!=-1)
		{
		c_start=c_start + c_name.length+1;
		c_end=document.cookie.indexOf(";",c_start);
		if (c_end==-1) c_end=document.cookie.length;
		return unescape(document.cookie.substring(c_start,c_end));
		}
	  }
	return "";
}

function checkCookie(c_name)
{
	cookie_value=getCookie(c_name);
	if (cookie_value=="") {
		$('#survey').dialog('open');
	}
}

function deleteCookie(c_name) {
	document.cookie = c_name +'=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}

The style for the “Thank you” graph:

div.progress-container {
  border: 1px solid #ccc;
  width: 150px;
  padding: 1px;
  margin-bottom: 5px;
  background: white;
}

div.progress-container > div {
  height: 12px;
  margin-bottom: 2px;
}
div.progress-container > div.pink {
  background-color:#CC6699;
}
div.progress-container > div.blue {
  background-color: #3366CC;
}
div.progress-container > div.soccer {
  background-color: #006633;
}
div.progress-container > div.futbol {
  background-color: #663333;
}

You’ll notice in the .post function that the width of the bar graph is set with the percent of responses for each answer that comes back from the database.

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.

Update (Feb. 1, 2010) – Important:

After speaking to a few people regarding this issue, some other situations where this will occur have come to light.

First (most important), make sure you tracking code is installed properly on every page of your site. If you use cross-domain tracking or sub-domain tracking, install it correctly on every page of the site.

Second, do not mix the asynchronous tracking code with the original synchronous tracking code on the same page. This WILL result in tracking anomalies. Also, if you mix them on the same site but different pages, make sure they do the same thing. In other words, if one is set for cross-domain tracking, the other should be as well. And, finally, if you use third-party tools that incorporate GA tracking like some shopping carts, install the original tracking code unless specifically instructed to install the asynchronous code.

I began to notice that my own site, jensbits.com, is listed as the top referrer in Google Analytics. This did not seem to be correct since another site I managed had no such issue. And, I also determined that this began right after certain date, in my case, August 10, 2009. So I began to investigate.

What happened on or about 10 August 2009? I put a post on my site that day that has proven to be quite popular. In that post, there is a link to a demo. When I originally posted the demo link, I typed in an absolute URL of http://jensbits.com/demo/forms/index.php for the link’s href. Notice the missing ‘www.’ And, that was the culprit. Eventually, I went through my site to standardize my links and replaced all absolute paths with relative paths. It turns out, however, that loads of people apparently bookmarked the demo and were hitting it directly.

The cookies set by Google Analytics for the http://jensbits.com link had a host parameter (value) of ‘.jensbits.com.’ The cookie also had a correct referrer of (direct). So far so good. All is correct.

The demo page has a link on it to return to the post. That link is relative and it points back to the WordPress post. WordPress will correctly rewrite the URL to include the ‘www.’ The demo link was not a WordPress post so it did not get rewritten. After clicking on the ‘return to post’ link and looking at the cookies again, I now have double the cookies for my site. One set of cookies has ‘.jensbits.com’ as the host value and the other set has ‘www.jensbits.com’ as the value.

The cookies set by Google Analytics for the http://www.jensbits.com link had a referrer of jensbits.com. Correct, but incorrect.

The solution was to fix the canonicalization of the URLs. In other words, all the URLs had to resolve to either jensbits.com or www.jensbits.com. I choose www.jensbits.com since WordPress was doing such a fine job for my posts.

Once the rewrite fix was in place, I have the correct amount of cookies and the correct referrer for the site when I retrace my steps from the demo link to the main site just as I did previously.

Don’t expect to see a precipitous drop off in the referrer number for your site once you institute this. It will decrease over time. Look for a trend, not a miracle. Google Analytics cookies have a lifespan. Return visitors may still carry erroneous cookie data like an albatross around their necks until it eventually dies a natural death.

BTW, the other site I mentioned, I had long ago put in a rewrite rule to include the ‘www’ because of a programmatic session cookie issue with a web-based application. It was my determination at the time that is was specific to the way the programming language I was using was setting cookies.

One other thing to consider: If you are the site owner and/or webmaster, you should put a filter into your Google Analytics profile that prevents your visits from being entered into the reports. An IP address filter is the preferred method to accomplish this.

Note: This is not a WordPress issue. This can happen to any site that will resolve to with or without the ‘www’ in the URL.

Recommended Reading

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

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.

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.

<cffunction name="googleLogin" access="public" hint="GA account authorization">
        <cfargument name="email" type="string" required="yes" default="">
        <cfargument name="password" type="string"required="yes" default="">
        <cfargument name="gaLoginUrl" type="string" required="no" default="https://www.google.com/accounts/ClientLogin">

        <cfset var loginAuth = "" />

        <cfhttp url="#arguments.gaLoginUrl#" method="post">
            <cfhttpparam name="accountType" type="url" value="GOOGLE">
            <cfhttpparam name="Email" type="url" value="#arguments.email#">
            <cfhttpparam name="Passwd" type="url" value="#arguments.password#">
            <cfhttpparam name="service" type="url" value="analytics">
            <cfhttpparam name="source" type="url" value="my-analytics">
        </cfhttp>

        <cfif NOT FindNoCase("Auth=",cfhttp.filecontent)>
            <cfset loginAuth = "Authorization Failed" />
        <cfelse>
            <cfset loginAuth = Mid(cfhttp.filecontent, FindNoCase("Auth=",cfhttp.filecontent) + (Len("Auth=")), Len(cfhttp.filecontent)) />
        </cfif>

         <cflock scope="session" type="exclusive" timeout="5">
                <cfset session.ga_loginAuth = loginAuth />
         </cflock>

    </cffunction>

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

    <cffunction name="callApi" access="public" returntype="array" hint="GA data as array of structures">
        <cfargument name="gaUrl" type="string" required="yes">
        <cfargument name="authToken" type="string" required="yes">

        <cfset var authTokenHeader = 'GoogleLogin auth=' & arguments.authToken />
        <cfset var responseOutput = "" />

        <cfhttp url="#arguments.gaUrl#" method="get">
            <cfhttpparam name="Authorization" type="header" value="#authTokenHeader#">
        </cfhttp>
        <cfset responseOutput = cfhttp.filecontent />

        <!---remove dxp: prefix from nodes that have it and strip xmlns from feed element--->
         <cfset responseOutput = responseOutput.ReplaceAll("(</?)(\w+:)","$1") />
         <cfset responseOutput = REReplaceNoCase(responseOutput,"<feed[^>]*>","<feed>") />

         <!---entry nodes hold the data--->
         <cfset entryNodes = XmlSearch(responseOutput, '//entry/') />

         <cfreturn entryNodes />
    </cffunction>

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.

<cfinvoke component="ga" method="parseProfiles" returnvariable="profilesArray">
          <cfinvokeargument name="gaUrl" value="https://www.google.com/analytics/feeds/accounts/default" />
          <cfinvokeargument name="authToken" value="#session.ga_loginAuth#" />
</cfinvoke>

<cffunction name="parseProfiles" access="public" returntype="array" hint="GA profiles as array of structures">
        <cfargument name="gaUrl" type="string" required="yes">
        <cfargument name="authToken" type="string" required="yes">

        <cfset var profileArray = ArrayNew(1) />
        <cfset var entryStruct = StructNew() />

        <cfset entryNodes = callApi(arguments.gaUrl,arguments.authToken) />

        <cfloop from="1" to="#ArrayLen(entryNodes)#" index="num">
            <cfset entryStruct = StructNew() />

            <cfset entryStruct.id = entryNodes[num].id.XmlText />
            <cfset entryStruct.title = entryNodes[num].title.XmlText />
            <cfset entryStruct.tableId = entryNodes[num].tableId.XmlText />

            <cfloop from="1" to="#ArrayLen(entryNodes[num].property)#" index="i">
                <cfswitch expression='#entryNodes[num].property[i].XmlAttributes["name"]#'>
                    <cfcase value="ga:accountId">
                        <cfset entryStruct.accountId = entryNodes[num].property[i].XmlAttributes["value"] />
                    </cfcase>
                    <cfcase value="ga:accountName">
                        <cfset entryStruct.accountName = entryNodes[num].property[i].XmlAttributes["value"] />
                    </cfcase>
                    <cfcase value="ga:profileId">
                        <cfset entryStruct.profileId = entryNodes[num].property[i].XmlAttributes["value"] />
                    </cfcase>
                    <cfcase value="ga:webPropertyId">
                        <cfset entryStruct.webPropertyId = entryNodes[num].property[i].XmlAttributes["value"] />
                    </cfcase>
                </cfswitch>
            </cfloop>

            <cfset arrayAppend(profileArray,duplicate(entryStruct)) />

        </cfloop>

        <cfreturn profileArray />

    </cffunction>

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.

<cfset reqUrl = "https://www.google.com/analytics/feeds/data?ids=" & session.tableId & "&metrics=ga:newVisits,ga:pageviews,ga:visits,ga:visitors,ga:timeOnSite&start-date=" & session.startdate & "&end-date=" & session.enddate />

The XML response is then parsed out and returned as an array of structures.

<cffunction name="parseData" access="public" returntype="array" hint="GA data as array of structures">
        <cfargument name="gaUrl" type="string" required="yes">
        <cfargument name="authToken" type="string" required="yes">

        <cfset var returnArray = ArrayNew(1) />
        <cfset var entryStruct = StructNew() />

         <cfset entryNodes = callApi(arguments.gaUrl,arguments.authToken) />

         <!---loop through the entries and put each data point for each campaign in structure--->
            <cfloop from="1" to="#ArrayLen(entryNodes)#" index="num">

                <!---rest of the stats data from GA
                first check if dimension exists--->
                <cfif StructKeyExists(entryNodes[num],"dimension")>
                    <cfloop from="1" to="#ArrayLen(entryNodes[num].dimension)#" index="i">
                     <cfset "entryStruct.#Mid(entryNodes[num].dimension[i].XmlAttributes["name"],4,
Len(entryNodes[num].dimension[i].XmlAttributes["name"]))#" = entryNodes[num].dimension[i].XmlAttributes["value"] />
                     </cfloop>
                 </cfif>

                 <cfloop from="1" to="#ArrayLen(entryNodes[num].metric)#" index="i">
                         <cfset "entryStruct.#Mid(entryNodes[num].metric[i].XmlAttributes["name"],4,
Len(entryNodes[num].metric[i].XmlAttributes["name"]))#" = entryNodes[num].metric[i].XmlAttributes["value"] />
                  </cfloop>

                <cfset arrayAppend(returnArray,duplicate(entryStruct)) />

           </cfloop>

        <cfreturn returnArray />
    </cffunction>

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

Recommended Reading

Demo

Here a modal dialog box will be used to allow the user to select a date range. That date range will be validated to ensure that it goes from a start date that is prior to the end date. Also, an alternate field will be populated by the datepicker that formats the dates in a specific way. This can be helpful if you are using the dates in a database query or other call that requires a certain format.

First we put a button to open the dialog box and the dialog box itself on the page:

<button id="selectDateRange">Select Date Range</button>	 

<div id="dialog" title="Select Date Range">
<div id="message"></div>
	<form name="dateRange" id="dateRangeForm" action="index.cfm" method="post">
    <label for="startdate">Start Date</label>
    <input id="startdate" type="text" readonly /><input type="hidden" name="startdate" 

id="start_alternate" />
    <label for="enddate">End Date</label>
    <input id="enddate" type="text" readonly /><input type="hidden" name="enddate" id="end_alternate" 

/>
    </form>
</div>

A message div is in the dialog box to send the user success or error messages related to their date selection. The input boxes are set to readonly so the user cannot type in a date; they must use the datepicker.

Also needed on the page is a little css to ensure that the datepicker is above the dialog box:

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003;
    }
</style>

Then the jquery to set the datepicker to the appropriate input box in the dialog box, specify the alternate field and format, and specify min and max dates:

$("#startdate").datepicker({altField: '#start_alternate',altFormat: 'yy-mm-dd',minDate: '-1y',maxDate: -1});
$("#enddate").datepicker({altField: '#end_alternate',altFormat: 'yy-mm-dd',minDate: '-1y',maxDate: -1});

The minDate is set to a year from today (user cannot go back more than a year) with ‘-1y’ and the maxDate is set to yesterday (user cannot pick today or a future date) with -1. Check the jQuery documentation on the datepicker min and maxDates for further explanation.

And, of course, the code for the button that opens our dialog box:

$('button#selectDateRange').click(function(){
		$('#dialog').dialog('open');

	});

The dialog box code does several things including:

• Closing the datepicker when the dialog closes
• Checking for values in the input boxes
• AJAX post to validate the date range
• Displaying a message to the user after validating the date range
• Sets the additional dialog close button functions

$(function(){

	// jQuery UI Dialog
	$('#dialog').dialog({
		autoOpen: false,
		width: 400,
		modal: true,
		resizable: false,
		close: function() {
                        $('#message').html('');
			$('#dateRangeForm :input').each(function() {
				$(this).val('');
			});
			$("#startdate").datepicker('hide');
			$("#enddate").datepicker('hide');
		 },
		buttons: {
			"Submit": function() {
			var errors = 0;

			$('#dateRangeForm :input').each(function() {
				if($(this).val() == ''){
					$(this).prev().prev().css("color", "red");
					$(this).prev().val('Click box and use calendar to enter date.');
					errors++;
				} else {
					$(this).prev().css("color", "black");
				}
			 });

			if (errors == 0){
				dataString = $('form').serialize();
				$.ajax({
				type: "POST",
				url: "dateRange.php",
				data: dataString,
				dataType: "json",
				success: function(data) {

					if(data == 'invalid'){
						$('#message').html("<div class='errorMessage'>Date range is invalid.</div>");
					} else {
						$('#message').html("<div class='successMessage'>Date range is valid.</div>");
						//location.reload();
					}
				}

			  	});

				return false;

			  }

			  },
				"Close": function() { 

					$(this).dialog("close");
                                        $('#message').html("");
			                $('#dateRangeForm :input').each(function() {
				             $(this).val('');
			                });
					$("#startdate").datepicker('hide');
					$("#enddate").datepicker('hide');
				}
			 }
	});

The daterange.php is pretty straightforward:

<?php
	$errormsg = "none";

	$start_date = new DateTime($_POST["startdate"]);
	$end_date = new DateTime($_POST["enddate"]);

	if ($start_date > $end_date)
		$errormsg = "invalid";

echo json_encode($errormsg);
?>

Now, it entirely possible that you can validate the dates without a trip to the server; however, this example sets you up to use the dialog datepicker in more advanced processing or database calls on the server.

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

The dialog box contents can be placed anywhere in the body. For this example they look like this:

<div id="helpDialog1" title="Help >> Dialog 1">
        <p>In id imperdiet justo. Sed eu commodo erat. Nullam euismod dapibus magna a porttitor. Vestibulum odio turpis, ullamcorper eu ullamcorper sit amet, blandit id purus. Suspendisse commodo egestas augue, et fringilla lorem consequat et. Sed volutpat sapien at massa gravida sollicitudin. Nunc ut nibh orci.</p>
        <p>Nam quis odio vel arcu auctor tincidunt. Aenean vulputate, sapien id porttitor placerat, purus magna viverra ligula, eu tristique justo purus sit amet ligula. Etiam viverra, enim in luctus sollicitudin, arcu nulla accumsan quam, ut mattis orci eros at dui.</p>

    <p style="text-align:right;color: #cc0202;"><a id="closeHelp1" style="color:#cc0202;" href="#">Close</a> <strong>X</strong></p>
</div>

<div id="helpDialog2" title="Help >> Dialog 2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam orci eget enim vehicula volutpat. Cras eu tellus quis risus venenatis egestas vitae eget est. Donec nec lorem purus. Duis vitae tortor at lacus placerat rhoncus id sit amet lectus. Suspendisse potenti. Aliquam vitae tortor lorem.</p>
        <p>Proin ac sem magna. Donec interdum iaculis lacinia. Donec placerat malesuada mi, vitae malesuada sapien tincidunt ut. Mauris a nibh arcu. Etiam a magna a ipsum faucibus sollicitudin. Morbi nisl nunc, porttitor vitae suscipit in, rutrum at augue.</p>
        <p style="text-align:right;color:#cc0202;"><a id="closeHelp2" style="color:#cc0202;" href="#">Close</a> <strong>X</strong></p>
</div>

Not much. Just a little styling for sanity’s sake and lots of Latin. Take note of the id’s. They are helpDialog1 and helpDialog2. The number will be needed later.

Like, now…

$('[id^=helpDialog]').dialog({
                autoOpen: false,
                modal: false,
                width: 300,
                resizable: false,
                show: 'blind',
                hide: 'blind'
            });

The jQuery sets some options for the dialog boxes, and it does this by identifying the dialog boxes with the common part of the id. The ‘^’ means ’starts with’ as in the id starts with helpDialog.

Just like that all the dialogs your heart desires are set and ready to go.

The click function on the help buttons does all the heavy lifting.

$('.help').click(function() {
              //strip off prefix of buttin id to get number for dialog
                var helpBtnIdPrefix = 'helpBtn';
                var helpBtnNum = $(this).attr('id').substring((helpBtnIdPrefix.length));

                //offset returns top and left of element
                var helpBtnOffset = $('#helpBtn' + helpBtnNum).offset();
                //width of element
                var helpBtnWidth = $('#helpBtn' + helpBtnNum).width();
                //width of dialog box
                var dialogWidth = $('#helpDialog' + helpBtnNum).dialog('option', 'width');

                //x and y positions of dialog box
                $('#helpDialog' + helpBtnNum).dialog('option','position',[helpBtnOffset.left+helpBtnWidth-dialogWidth,helpBtnOffset.top-$(window).scrollTop()]);
                $('#helpDialog' + helpBtnNum).dialog('open');
            });

The script starts by stripping off the prefix on the button id to get to the number of the button as it corresponds to the dialog box.

Then it gets the button offset or left and top position on the document. Next, it gets the button’s width. All this is used to properly place the dialog over the button.

The x position of the dialog are set using the button’s left position and width along with the dialog box width. The y position is set by using the button’s top position minus the window scroll position in case the user scrolled down.

After the math, the dialog is opened.

An extra close button was added at the bottom of the dialog box for user convenience.

//added close btn at bottom of dialog
            $('[id^=closeHelp]').click(function() {
                var closeHelpPrefix = 'closeHelp';
                var closeHelpNum = $(this).attr('id').substring((closeHelpPrefix.length));
                $('#helpDialog' + closeHelpNum).dialog('close');
            });

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

It costs $50 to take. Seems a little steep but I did learn so much more than I would have had I not been so motivated. Meaning: I wasn’t going to waste my $50.

Recommended Reading