cookie question

[dfowler]

Hey guys, I have a website that I want to launch a survey popup after a user has cycled through a couple pages.  My thought was to insert a cookie when they first hit the site, then increment the cookie by 1 on each page.  Then when the cookie hits like 5 or something launch the javascript function I created to display the survey.

 

Here is my problem, I have created the survey function and it works great.  However, I don't know how to utilize cookies AT ALL (especially with how I want to use them with the incrementing and launching of function).  I would love some help on this.

 

Thanks!

[mentalist]

First off start by working through a few tutorials, doing all the examples. Trial and error is the best way to understand!

 

http://www.quirksmode.org/js/cookies.html

http://www.w3schools.com/JS/js_cookies.asp

[dfowler]

First off start by working through a few tutorials, doing all the examples. Trial and error is the best way to understand!

 

http://www.quirksmode.org/js/cookies.html

http://www.w3schools.com/JS/js_cookies.asp

Thanks for the links!  I was able to figure out the cookie logic I needed.  Here are the functions I created/used:

function getCookieData(cookieName) {
var i,x,y,cookies=document.cookie.split(";");
for (i=0;i<cookies.length;i++) {
	x=cookies[i].substr(0,cookies[i].indexOf("="));
	y=cookies[i].substr(cookies[i].indexOf("=")+1);
	x=x.replace(/^\s+|\s+$/g,"");
	if (x==cookieName){
		return unescape(y);
	}
}
}
function deleteCookie(cookieName) {
document.cookie = cookieName + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}
function checkCookies() {
var metas = document.getElementsByTagName('meta');
var i;
for (i = 0; i < metas.length; i++) {
	if (metas[i].getAttribute('name') == "pageTitle"){
		break;
	}
}
var galleryTitle = metas[i].getAttribute('property');
if (document.cookie.indexOf('galleryName') != -1) {
	var gallery = getCookieData('galleryName');
	if(gallery == galleryTitle) {
		var newValue = getCookieData('galleryViews') * 1 + 1;
		document.cookie = 'galleryViews=' + newValue;
		if(newValue/5 == 1) {
			showSurvey();
			document.cookie = 'galleryViews=1';
		}
	} else {
		showSurvey();
		document.cookie = 'galleryName=' + galleryTitle;
		document.cookie = 'galleryViews=1';
	}
} else {
	showSurvey();
	document.cookie = 'galleryName=' + galleryTitle;
	document.cookie = 'galleryViews=1';
}
}

 

My new question is this (which maybe I should create a new topic for).  How would I temporarily change the document url to include a # pound sign and fictional anchor tag, so users can't refresh away from the survey readily?

 

Thanks for any help!

[.josh]

location.href = location.href + "#foobar";

[dfowler]

location.href = location.href + "#foobar";

Well that was simple enough, but how do I get that to carry over across pages (if it is even possible)?  Let me describe the showSurvey() function I have up there.  The function hides the main content (display none) of the page, and creates a new div with the survey in it.  Once a user clicks the 'submit' button the div with the survey goes away (using .remove) and the div with the main content comes back (display block).  This is all done using javascript (jquery and such).  Thanks to Crayon, I've tweaked the code so that when showSurvey() fires it places a hash tag in URL saying #survey.  So if the user tries to refresh the code sees this hash tag and shows the survey.  When they hit submit, I remove the tag from the url.

 

Now, what if a user clicks a different link on the site?  The page moves on and they can skip the survey.  So my new question is (and I've been googling and can't find a way).  How do I carry that #survey tag over whenever a link is clicked?  Thanks for all the help so far guys!

[dfowler]

No worries, I figured out a work around by just creating another cookie when the survey plays.  Then check for that cookie on each page load.  Thanks for all help guys!