Question

I am implementing multilingual support into my webpage. I would like to minimize the page blinking caused from page reload, and I came to the idea to change page language without forcing the whole page to reload. To achieve this, the only possible way that comes to my mind is with the use of JavaScript:

1. I dynamically load appropriate language .js file with appropriate translations
2. I manually go through every text object on the page and update it by re-sending the appropriate new text value

To provide you with example code, I paste a code that will update just submit buttons. On the language change, I call a function that loads appropriate .js language file dynamically.

var fileRef = LoadJsCssFile("Language/svk.js", "js", UpdateLanguage);

After the language .js file is fully loaded, I call the function that updates every element containing text on the webpage:

function UpdateLanguage()
{
    var buttons = document.getElementsByClassName("submit_button");
    for (buttonID in buttons)
    {           
            buttons[buttonID].innerHTML = lang.SUBMIT;
    }                   
};

Manually updating every text object in the webpage is complex and error prone. As I am not very experienced with JavaScript yet, I was thinking, if there is a way to simply refresh the all key elements in the webpage with one JavaScript command without casing the webpage blink?

If you have any other idea, how to effectively implement language change without page blink, I am interested to know. 🙂

Answer 1

I found a solution on my own:

1. I prepare several javascript language files containing strings per every keyword
2. On language selection button, I import appropriate language file for the language I wish to use
3. I manually update every text on the webpage through javascript.

The above solution is suitable for smaller sites. for large ones, that would be a lot of work, to update every single text string through javascript.