How to change language folder on the same page? (by using jQuery or JavaScript)

Question

I have a site with 2 languages that are En and Th. Each language has the same file name in different folder, i.e. /en/ and /th/. I've created <a> tag to switch between these 2 languages on my included header file (asp).

The question is how to get the current path wherever you are, and change folder name to en or th? (If you are inside English Contact page, clicking th will take you to Thai Contact page.)

I have tried to create a function:

<script>
     function changeLanguage(to) {
         var from = jQuery.url.segment(-2);
         var url = from.replace('/' + from + '/', to);
         document.location = url;
     }
</script>

to use in <a> tag.

<a id="flags" href="#" onclick="changeLanguage(en)"> English </a>|<a href="#" onclick="changeLanguage(th)" >Thai</a>

But it does not work. I've spent so many days to find a similar question. I found some but still couldn't apply to my code. So please help me. I'm really newbie on this and really need your help. Thank you very much.

Wouldn't the var url = from.replace('/' + from + '/', to); statement change your www.domain.com/en/ to www.domain.comth ? Is produced url correct? — denolk
– denolk, Commented Sep 15, 2011 at 16:55

voigtan · Accepted Answer · 2011-09-15 18:08:16Z

1

you need to add a string, at the moment you are saying changeLanguage(variable named en), use:

onclick="changeLanguage('en')"

or use jquery to bind the click event for you:

<a id="flags" href="#en" class="flag"> English </a>|<a href="#th" class="flag">Thai</a>

and use the jquery code:

$(function() {
    $(".flag").click(function(e) {
        e.preventDefault();
        var to = $(this).attr("href").substring(1); //removes the hash value # (#en will become 'en')
        var from = jQuery.url.segment(-2);
        var url = from.replace('/' + from + '/', '/' + to + '/');
        document.location = url;
    });
});

I have moved the language text to the href instead so we can catch that in the click event.

an example that will pop an alert to what language you clicked on: http://jsbin.com/epavoh/2/

edited Sep 15, 2011 at 18:08

answered Sep 15, 2011 at 16:54

voigtan

9,0212 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kalle H. Väravas Over a year ago

I think need to add return false; inside the click(), if it gets triggered by a hyperlink.

voigtan Over a year ago

No, you dont have to add return false; Im using the event.preventDefault api.jquery.com/event.preventDefault that works in my meaning better.

Kalle H. Väravas Over a year ago

Oh, right right. though, my logic says that preventDefault() as a function is slower then return false.

Alxan · Accepted Answer · 2011-09-16 13:38:09Z

@voigtan, I've spent time try to understand your code. But no matter i've tried, this code still add #en or #th after my URL.

    <script>
     $(".flag").click(function(e) {
     e.preventDefault();
     var to = this.href.substring(1); 
     var from = jQuery.url.segment(-2);
     var url = from.replace('/' + from + '/', '/' + to + '/');
     document.location = url;   
     });        
    </script>

with

   <a id="flags" href="#en" class="flag"> English </a>|<a href="#th" class="flag">Thai</a>

Yes, I know what jQuery.url.segment(-2) use for. It will find the segment of URL from 2 path from the right, right? my folder was root/en/default.asp, so (-2) will return the value of "en" or "th".

Actually, no need to be Javascript or jQuery. Any thing would be ok just can fit my .asp, that's all.

Collectives™ on Stack Overflow

How to change language folder on the same page? (by using jQuery or JavaScript)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related