Language redirection with javascript

Question

I have to build a multi language website in Business Catalyst(not my choice), my only option for the language switcher and the fore the link rel="alternate" is JS. After a lot of trial and error I got this to work:

<script type="text/javascript">
document.write("<ul>"); 
document.write("<li><a href=\"http://localhost:8888/en/" + location.pathname + "\">English</a></li>");
document.write("<li><a href=\"http://localhost:8888/fr/" + location.pathname + "\">French</a></li>");
document.write("<ul>"); 
</script>

The only problem is that it is slow and probably badly written. It is there a better way to write the code? Maybe one that load faster and possibly using jQuery?

Thank you very much in advance for your help

Antonio

Hi Antonio. Where does document.write actually add the list? at the end of the document? Second, what is slow? Writing the list? since you don't have any other action. Besides, is it slow on you localhost or on live server. — Mohammed Joraid
– Mohammed Joraid, Commented Mar 17, 2014 at 4:08
Hi Joraid, thank you very much for your reply. The language switcher will be both in the header and in the footer of the website. When I say slow, I mean that it take 1 second from when the page appear for the actual links to show. — Antek
– Antek, Commented Mar 17, 2014 at 10:04

SajithNair · Accepted Answer · 2014-03-17 04:17:53Z

0

You can include the following in your html.

<ul id="multilang">
    <li>
        <a href="http://localhost:8888/en/">English</a>
    </li>
    <li>
        <a href="http://localhost:8888/fr/">French</a>
    </li>
</ul>

Then use jQuery to manipulate the url.

$(function () {
    $.each($("#multilang a"), function () {
        $(this).attr('href', $(this).attr('href') + location.pathname);
    });
});

answered Mar 17, 2014 at 4:17

SajithNair

3,8851 gold badge20 silver badges23 bronze badges

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

1 Comment

Antek Over a year ago

Thank you very much Sajith, that's great, I'm less than a rookie in JS... But I'm trying to learn

TGH · Accepted Answer · 2014-03-17 04:08:21Z

0

I generally recommend avoiding string based dynamic html since it tends to be hard to maintain over time. Instead I recommend going for some sort of template based solution. There are a few options, but one popular framework is KnockoutJs

http://knockoutjs.com/

answered Mar 17, 2014 at 4:08

TGH

39.4k13 gold badges106 silver badges140 bronze badges

1 Comment

Antek Over a year ago

Thank you TGH, I will check it out!

Community · Accepted Answer · 2017-05-23 10:25:04Z

0

1- A a starter. document.write will replace the whole DOM with your list, therefore, I suggest appending the list to an html element.

2- To improve performance, try to have less function call to reduce overhead. Option 1: prepare the html and write it in one string, then append that string. E.g.

var lang = "<ul><li>stuff...</li><li>other stuff....</li></ul>";

Or, for readability,

lang = "<ul>";
lang = "<li><a href=\"http://localhost:8888/en/" + location.pathname + "\">English</a></li>";
lang = "<li><a href=\"http://localhost:8888/fr/" + location.pathname + "\">French</a></li>";
lang = "</ul>";

Then

$("#change_lang").html(lang);//change_lang is a div <div id="change_lang"> that you have prepared to put the links inside.

3- Maybe you can load the html from your server directly, without having JS to print it on screen for you. Put it in .html page (I'm not sure about your page structure, therefore, I cannot know why this approach might not be suitable for you) but loading html directly without waiting for JS and JQuery to load will make display much faster.

<ul>
    <li><a href="http://localhost:8888/en/yoursite.html">English</a></li>
    <li><a href="http://localhost:8888/fr/yoursite.html">French</a></li>
</ul>

4- Also try to put your JS code in separate files, and then minify them to reduce size and hence loading time. Having JS in separate files allows the browser to cache them and eliminate the need to load them every time. Search for PageSpeed to show you various ways to improve your site performance.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Mar 17, 2014 at 4:15

Mohammed Joraid

6,5802 gold badges29 silver badges38 bronze badges

1 Comment

Antek Over a year ago

Hi Joraid, Thank you very much for your reply, I actually keep them separated and minified, but in this particular situation I really did not know what to write... And after a lot of googleing and mistakes I came out with that messy code...

Collectives™ on Stack Overflow

Language redirection with javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related