JavaScript: Changing Language Without Page Reload

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:

I dynamically load appropriate language .js file with appropriate translations
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. :-)

It would be better to use AJAX to simply load the new page and then replace the HTML in the current document body. — diolemo
– diolemo, Commented Jun 3, 2012 at 0:05
You'll probably want to replace the text sentence-by-sentence, rather than using one word as a unit, as translations are more often about the whole context of the sentence rather than just replacing individual words - otherwise the meaning can be lost. — matt b
– matt b, Commented Jun 3, 2012 at 0:05
also are your users really changing their language setting all that often for it to be worth the effort to handle it without reloading the page from the server? Most users will rarely change a language more than once, if ever. — matt b
– matt b, Commented Jun 3, 2012 at 0:08
Don't use for..in, use a for loop, otherwise you will be accessing enumerable properties of the HTMLCollection object that are't elements (e.g. length, item) and may do strange things if you try to set their innerHTML property. If you're using input elements as submit buttons, change their value property, not their innerHTML. — RobG
– RobG, Commented Jun 3, 2012 at 0:11

Bunkai.Satori · Accepted Answer · 2012-08-27 11:32:49Z

1

I found a solution on my own:

I prepare several javascript language files containing strings per every keyword
On language selection button, I import appropriate language file for the language I wish to use
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.

answered Aug 27, 2012 at 11:32

Bunkai.Satori

4,76813 gold badges53 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

JavaScript: Changing Language Without Page Reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related