javascript cookie redirect (with various options) - help needed


M

matt

I'm a bit stuck with this redirect and javascript in general.

I am building a site which on the first page users are given a list of
cities.
They choose their city, a pop up asks them if they want their browser
to remember their choice for future visits, then they get redirected
to a page which is relevant to their city.

If they opted for their choice to be remembered (ie/ a cookie to be
set) then they would never see the list of cities again (or until the
cookie expires) and instead they would be redirected seamlessly from
the main page to their city page.

Here's what I have so far (only using 2 cities - Bath and
Birmingham... but 50 to be added!):

1. Within <head> and </head>:

<script language="Javascript">
function expireGMT (days)
{
var now=new Date();
now.setTime (now.getTime()+days*24*3600000);
return "; expires=" + now.toGMTString()
}

function select(cc)
{

var city;
if(cc=="Bath")
{
city = "Bath";
}
if(cc=="Birmingham")
{
city = "Birmingham";
}

var answer = confirm("You just selected "+city+"\n\nWould you like
your browser to remember this selection for future visits?");

if(answer)
{
var cookievalue = 'cookiename='+cc+ expireGMT(90)
document.cookie = cookievalue;
}


if(cc=="Bath")
{

document.location="http://www.mydomain.co.uk/bath.htm";

}
if(cc=="Birmingham")
{

document.location="http://www.mydomain.co.uk/birmingham.htm";
}

}

</script>


Inside the body tags I have 2 text links:

<td valign="middle"><span class="style6"><a
href="javascript:select('Bath');">Bath</a></span></td>
<td valign="middle"><span class="style6"><a
href="javascript:select('Birmingham');">Bath</a></span></td>


My problem:

Clicking on one of these 2 cities does create a cookie called
'cookiename' with value 'Bath' or 'Birmingham' and even overwrites if
more visits are done and different options chosen.

Also on clicking the city name the person is taken to that destination
page. However, on revisiting the site, I am faced with the list of
cities again. So it isn't doing the job of being able to read the
cookie and apply a redirect based on that.

Can anyone point me in the direction of where I'm going wrong?
The code that I have gathered and amended leaves me with "cc", not too
sure what this is or if it is just a made up function name that
someone put in there.

Either way I'm really stuck with this and have been searching for
options.
Would these to bits of code eventually allow me to do redirects for
50+ cities or would I need a solution where another file is referenced
eg/ citychoice.js ?


Any help very much appreciated with this,

Thanks
 
Ad

Advertisements

D

David Mark

I'm a bit stuck with this redirect and javascript in general.

I am building a site which on the first page users are given a list of
cities.
They choose their city, a pop up asks them if they want their browser
to remember their choice for future visits, then they get redirected
to a page which is relevant to their city.

You should use a form with a checkbox for the remember option.
If they opted for their choice to be remembered (ie/ a cookie to be
set) then they would never see the list of cities again (or until the
cookie expires) and instead they would be redirected seamlessly from
the main page to their city page.

This is best handled with a server side redirect. What if JavaScript
is not available or disabled?
Here's what I have so far (only using 2 cities - Bath and
Birmingham... but 50 to be added!):

1. Within <head> and </head>:

<script language="Javascript">
function expireGMT (days)
{
var now=new Date();
now.setTime (now.getTime()+days*24*3600000);
return "; expires=" + now.toGMTString()

}

function select(cc)
{

var city;
if(cc=="Bath")
{
city = "Bath";
}
if(cc=="Birmingham")
{
city = "Birmingham";
}

Why not:

city = cc;

Or just reference the cc argument below.
var answer = confirm("You just selected "+city+"\n\nWould you like
your browser to remember this selection for future visits?");

if(answer)
{
var cookievalue = 'cookiename='+cc+ expireGMT(90)
document.cookie = cookievalue;
}

if(cc=="Bath")
{

document.location="http://www.mydomain.co.uk/bath.htm";

}
if(cc=="Birmingham")
{

document.location="http://www.mydomain.co.uk/birmingham.htm";
}

}

Better yet:

window.location.href = "http://www.mydomain.co.uk/" + city + ".htm"

</script>

Inside the body tags I have 2 text links:

And a table apparently.
<td valign="middle"><span class="style6"><a
href="javascript:select('Bath');">Bath</a></span></td>
<td valign="middle"><span class="style6"><a
href="javascript:select('Birmingham');">Bath</a></span></td>

And what does "style6" imply? Why not something like "menuChoice?"
And you should never put script in href attributes (see the FAQ.)
My problem:

Clicking on one of these 2 cities does create a cookie called
'cookiename' with value 'Bath' or 'Birmingham' and even overwrites if
more visits are done and different options chosen.
Right.


Also on clicking the city name the person is taken to that destination
page. However, on revisiting the site, I am faced with the list of
cities again. So it isn't doing the job of being able to read the
cookie and apply a redirect based on that.

No. It isn't. As I mentioned, you should leave that to a server side
script.
Can anyone point me in the direction of where I'm going wrong?

You left out the part of the code that reads the existing cookie when
the document loads and replaces the initial page. Something like:

city = getCookie('cookiename');
if (city) window.location.replace("http://www.mydomain.co.uk/" + city
+ ".htm");

The "getCookie" function name is made-up. Google for "JavaScript
cookies" and you will find lots of examples.

The code that I have gathered and amended leaves me with "cc", not too
sure what this is or if it is just a made up function name that
someone put in there.

You shouldn't be scripting Web pages if you can't see what "cc" is.
Either way I'm really stuck with this and have been searching for
options.

Your best option is to forget JavaScript as a solution for this
problem.
Would these to bits of code eventually allow me to do redirects for
50+ cities or would I need a solution where another file is referenced
eg/ citychoice.js ?

Additional files won't help unless one contains a function to retrieve
cookies.
 
M

matt

Thanks for your help David, I will keep playing around taking into
account what you've said.

The style stuff is just css.

I have been trying to use your suggestion of:

city = getCookie('cookiename');
if (city) window.location.replace("http://www.mydomain.co.uk/" + city
+ ".htm");

But with no luck, I think it messes up when people click the city
link, maybe some problem with feeding the 'answer' back in and looking
for the cookie.

You're right about not being ready for programming! But everyone has
to start somewhere and I'm learning :)
This isn't my living though (Thank God)


The basics in my code came from a page on the apple site:
http://www.apple.com/uk/thestore
This page seems to do what I need it to. It uses a cookie for the
browser to remember if you want the Irish store or the UK store.

Can you see why there's is working and mine isn't?

Regarding people not having Javascript enabled - I don't know the %
but if it is smallish, and these people always have to select their
city from the list then I don't think that this is a big problem...

I will keep trying and appreciate your thoughts.

If you can help further (even by suggesting how to do it server side)
that would be great. I have been googling but haven't found anything
that does the things I mentioned in the original post.

Thanks
 
D

David Mark

Thanks for your help David, I will keep playing around taking into
account what you've said.

The style stuff is just css.

I have been trying to use your suggestion of:

city = getCookie('cookiename');
if (city) window.location.replace("http://www.mydomain.co.uk/" + city
+ ".htm");

But with no luck, I think it messes up when people click the city

You did see where I said that getCookie is an arbitrary name for a
function that does not exist in your code. You need a function in
there to retrieve cookies.
link, maybe some problem with feeding the 'answer' back in and looking
for the cookie.

I can't see what you did, but if you used that example verbatim you
will get a script error.
You're right about not being ready for programming! But everyone has
to start somewhere and I'm learning :)

Start by writing and testing the page with JavaScript disabled. Then
add the scripted enhancements.
This isn't my living though (Thank God)

The basics in my code came from a page on the apple site:http://www.apple.com/uk/thestore
This page seems to do what I need it to. It uses a cookie for the
browser to remember if you want the Irish store or the UK store.

And I am sure that somewhere in there is a function to retrieve
cookies.
Can you see why there's is working and mine isn't?

No. Because I can't see yours.
Regarding people not having Javascript enabled - I don't know the %
but if it is smallish, and these people always have to select their
city from the list then I don't think that this is a big problem...

Except they can't use your links as written. The href's are
JavaScript. Use the onclick attribute to call the code that sets the
cookie. Remove the window.location.href = "..." lines and put the
URI's in the href attributes where they belong.
I will keep trying and appreciate your thoughts.

If you can help further (even by suggesting how to do it server side)

This isn't the appopriate forum for server side scripting. For
example, if using PHP, ask about this in a PHP forum.
that would be great. I have been googling but haven't found anything
that does the things I mentioned in the original post.

Did you Google for "JavaScript cookies" like I mentioned?
 
M

matt

getCookie does seem to be a function in itself.

As far as searching on Google I did this for a few hours before
posting.

The closest thing (which comes very very close) is an example where a
variable (animal in their case) is ticked, and the form submitted.
There is then a direct to the appropriate page.

But I need this to happen from a text link, but their example was a
form and submit using "onClick" function.

I have also seen about 20 other ways to do redirects with Javascript
and cookies, but they have all been flawed so far in not making all
the bits happen.

I also understand that the links I'm using are javascript actions and
so if javascript is disabled on a user's machine this will lead to
problems.

Never mind, thanks for your advice - maybe php is the way to go unless
someone can offer any other advice.

Thanks
 
D

David Mark

getCookie does seem to be a function in itself.

You should quote what you are replying to. In any event, getCookie is
not a function unless you declare it. I simply used getCookie as a
suggested name for a function that retrieves cookies (a function that
was conspicuously absent from your posted code.)
As far as searching on Google I did this for a few hours before
posting.

Searching Google for what?
The closest thing (which comes very very close) is an example where a
variable (animal in their case) is ticked, and the form submitted.

By variable, I assume you mean form element.
There is then a direct to the appropriate page.

The server redirects to another page based on the submitted form data,
which is done with server side script (eg PHP.)
But I need this to happen from a text link, but their example was a
form and submit using "onClick" function.

"onclick" is not a function. I assume they used an onclick attribute
of a button element to call a function, in which case they are doing
the redirect with a (bad) client side script.
I have also seen about 20 other ways to do redirects with Javascript
and cookies, but they have all been flawed so far in not making all
the bits happen.

I posted the basic code, but without a function to retrieve cookies.

http://www.google.com/search?source...D,GGLD:2005-18,GGLD:en&q="JavaScript+Cookies"

First result has one.
I also understand that the links I'm using are javascript actions and
so if javascript is disabled on a user's machine this will lead to
problems.

Right. I told you what to do about that.
Never mind, thanks for your advice - maybe php is the way to go unless
someone can offer any other advice.

PHP is only the way to go if your server supports it and you know how
to use it.
 
Ad

Advertisements

S

Steve Swift

The closest thing (which comes very very close) is an example where a
variable (animal in their case) is ticked, and the form submitted.
There is then a direct to the appropriate page.

But I need this to happen from a text link

Unless you are 100% certain that your user has JavaScript enabled then
it is impossible to get a simple text link to submit the content of a
FORM on your page. (I'm only 99% certain of this, but by stating this
I'm hoping that someone who knows better will show me how :).

Where you are fairly sure that the user does *not* have JavaScript
enabled, there are various tricks to get the appearance of a text link:

1. You may be be able to use <BUTTON> to fabricate something which looks
like a text link; I don't know if you can persuade the button itself
to vanish with CSS, leaving just its content on display. Watch out
for the bizarre Internet Explorer implementation of BUTTON though,
unless you're not at all interested in the POST data from the button
itself.

2. I've even resorted to using images of links in SUBMIT buttons.
This works well only if you have absolute control over the style of
other links on the page, which is nigh impossible given the browser's
control over displayed font sizes. Not recommended unless you have a
very small/tolerant/short-sighted audience.
 
Ad

Advertisements

D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
oglegroups.com>, Wed, 8 Aug 2007 01:30:48, (e-mail address removed)
posted:
now.setTime (now.getTime()+days*24*3600000);

now.setDate(now.getDate()+days)
or now.setUTCDate(now.getUTCDate()+days)

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.
 

Top