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

Answer 1

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);
    });
});

Answer 2

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/

Answer 3

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.