I would like to replace ".city1{background:red;}" with ".city1 with http://city1.example.com" so that when user selects a city1 the page goes to the city1 url page. Since I don't need the color box with a message, can I remove the code:

    var cityChosen = getCookie('citychosen');
    if(cityChosen!=null && cityChosen!=''){
        var chosen = $('#choose option[value="'+cityChosen+'"]');
        chosen.attr('selected',true);
        $("#output").removeClass().addClass(cityChosen).html("You have selected this last time.<br />" + chosen.text());
    }

Any help will be very much appreciated.

<head>

<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ font:24px Verdana, Geneva, sans-serif; margin:100px;}
#output{ color:#fff; margin:20px 0; padding:50px; height:200px; width:200px;}
.default{ background:#CCC;}
.city1{background:red;}
.city2{background:blue;}
.city3{background:orange;}
.city4{background:plum;}
-->
</style>
<script type="text/javascript" src="/static/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
    var cityChosen = getCookie('citychosen');
    if(cityChosen!=null && cityChosen!=''){
        var chosen = $('#choose option[value="'+cityChosen+'"]');
        chosen.attr('selected',true);
        $("#output").removeClass().addClass(cityChosen).html("You have selected this last time.<br />" + chosen.text());
    }
    $("#choose").change(function(){
        var selected = $("#choose option:selected");        
        var output = "";
        if(selected.val() != 0){
            setCookie('citychosen',selected.val(),365);
            output = "You just select this.<br />" + selected.text();
        }
        $("#output").removeClass().addClass(selected.val()).html(output);
    });
});

function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function dropCookie(name) {
    createCookie(name,"",-1);
}
//]]>
</script>
<title>Select</title>

</head>

<body>

<select id="choose">
        <option value="0">Select city</option> 
        <option value="city1">City 1</option> 
        <option value="city2">City 2</option> 
        <option value="city3">City 3</option> 
        <option value="city4">City 4</option> 
</select>
<div id="output" class="default"></div>

</body>

Recommended Answers

All 12 Replies

Member Avatar for diafol
<select id="citygo">
    <option value="amsterdam">Amsterdam</option>
    <option value="new_york">New York</option>
    <option value="london">London</option>
    <option value="cardiff">Cardiff</option>
</select>

$('#citygo').change(function(){
    var city = $(this).val();
    window.location.href = 'http://' + city + '.example.com';
});

Something like that?

Thanks for reply diafol. I got the idea from you and I have modified the code a little but it is not working. I need to keep the cookies for users to a visited sub-domain on his next visit to main domain.

<head>
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
    var cityChosen = getCookie('citychosen');
    if(cityChosen!=null && cityChosen!=''){
        var chosen = $('#choose option[value="'+cityChosen+'"]');
        chosen.attr('selected',true);
    }
    $("#choose").change(function(){
        var selected = $("#choose option:selected");
        var output = "";
        window.location.href = 'http://' + city + '.example.com';
        if(selected.val() != 0){
            setCookie('citychosen',selected.val(),365);
        }
        $("#output").removeClass().addClass(selected.val()).html(output);
    });
});

function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function dropCookie(name) {
    createCookie(name,"",-1);
}
//]]>
</script>
</head>

<body>
<select id="choose">
        <option value="0">Select city</option> 
        <option value="amsterdam">Amsterdam</option> 
        <option value="newyork">New York</option> 
        <option value="london">London</option> 
        <option value="cardiff">Cardiff</option> 
</select>
</body>
Member Avatar for diafol

I'm no js jedi, so I'm not sure about this, but...

    window.location.href = 'http://' + city + '.example.com';
    if(selected.val() != 0){
        setCookie('citychosen',selected.val(),365);
    }
    $("#output").removeClass().addClass(selected.val()).html(output);

The redirect will try to stop code execution, so everything after the first line will not run or will run partially depending on your browser's speed. Why would you need to run anything after a redirect? I'd swap these lines about.

Possibly other issues, but this is the one that stood out for me.

You are right. Do you have better idea to solve the issue. I am working on a site with multiple locations. I would like to let a user selects or types(on address bar) say a.example.com, on his next visit to example.com he should be re-directed to a.example.com. When he visit b.example.com and he should be re-directed to b.example.com.

Member Avatar for diafol

As I mentioned, just swap the lines

if(selected.val() != 0){
    setCookie('citychosen',selected.val(),365);
    $("#output").removeClass().addClass(selected.val()).html(output);
    window.location.href = 'http://' + city + '.example.com';
}

You could also store all the city data in an object so that you can create and append them dynamically to the select dropdown as well as check any selected value against it...

var cities = {
     "amsterdam": "Amsterdam",
     "newyork": "New York",
     "london": "London",
     "cardiff": "Cardiff" 
};

But that's a different animal, possibly outside the scope of this thread.

It is working and the domain example.com redirects to a.example.com. The problem is that the cookie is not holding and the domain example.com cannot redirect to a.example.com when I type on the address bar.

Member Avatar for diafol

What's your 'redirect on load' code? This?...

var cityChosen = getCookie('citychosen');
if(cityChosen!=null && cityChosen!=''){
    var chosen = $('#choose option[value="'+cityChosen+'"]');
    chosen.attr('selected',true);
    $("#output").removeClass().addClass(cityChosen).html("You have selected this last time.<br />" + chosen.text());
}

I don't get it. Why has it got anything to do with the dropdown?

For my money, it would be something like this...

var city = getCookie('citychosen');
if(city !=null && city !=''){
    window.location.href = 'http://' + city + '.example.com';
}

It is not working with the old code. I have changed the 'redirect on load' code base on your value 'city' and '#citygo'

    var city = getCookie('city');
    if(city!=null && city!=''){
        var chosen = $('#citygo option[value="'+city+'"]');
        chosen.attr('selected',true);
    }

Now the domain can redirect to the subdomain but keeps running repeatedly. It should be 2 of the 'window.location.href = 'http://' + city + '.example.com'. You are almost there.

$(function(){
    var city = getCookie('city');
    if(city !=null && city !=''){
    window.location.href = 'http://' + city + '.example.com';
    }
$('#citygo').change(function(){
    var city = $(this).val();
    window.location.href = 'http://' + city + '.example.com';
});
});


<select id="citygo">
    <option value="0">Select City</option>
    <option value="amsterdam">Amsterdam</option>
    <option value="newyork">New York</option>
    <option value="london">London</option>
    <option value="cardiff">Cardiff</option>
</select>

I realised that the cookie is still not working after clearing browser cache, but I really appreciate your time and help diafol.

Member Avatar for diafol

Thinking about it, automatically redirecting shouldn't work as you'd get redirected everytime you went to a new page and then to another page. If you are using server-side language, e.g. php, you could do it via 'session variables' or if you aren't bothered by lack of support for IE6/7 then you could use localStorage to keep a simple key/value pair.

My way of thinking would be to check for 'redirected' key on page load

1)If it doesn't exist, then store the 'redircted = 1' and then redirect to the subdomain if a cookie exists.

2)Otherwise if 'redirected' does exist then do nothing (no redirects)

The 'redirected' should be erased on browser close.

Would that be sufficient?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.