3

I am working on a multilangual website right now. I am currently including the related language file ('lange/_en.php') for language phrases. To change languages users will select their language from a < select > item. The thing i want to do is changing related phrases (and urls too if possible) in the page without refreshing or submitting the page.

I remember i saw something like this in web but i have no idea where.

Any help or any ideas about how this thing can be done?

Mustafa
  • 825
  • 3
  • 14
  • 37

3 Answers3

5

The issue with this is that a language change doesn't only affect a small section of the page, it affects the whole page. So really, you are left with three choices.

  1. The simple way which is indeed reloading the whole page. It's easy to implement, easy to maintain, and doesn't require you to make sure that JavaScript currently running on your page is aware of the new language at runtime.

  2. The complicated way which is getting all the new markup via AJAX and replacing the content of the <body> tag with the reloaded content. This will cause issues with other scripts running (such as image carousels, etc.) that holds a reference to an element so you have to reinitialize every single script that is running on settimeout() on your page.

  3. The close to impossible way which is to have a client side dictionary, selecting each relevant tag, and changing its contents with the new language. This is a pain to setup and a pain to maintain. You literally need a section tailored to each specific page. Again, if you have scripts with strings, you'll have to make sure that the strings they use are updated to the new language.

You are better off simply reloading the page. It will work without JavaScript and it's a one time deal that won't bother users.

Andrew Moore
  • 93,497
  • 30
  • 163
  • 175
  • 1
    +1 for the simple way. It's possible to change l10n using javascript, but it's one of those things where just because you can doesn't mean you should. What happens if somebody visits and wants to change their language but they don't have javascript? What if a js error creeps in somewhere else and cascades down, breaking the entire page (a la Gawker's recent excitement)? The best way for this is basically always to do it server side using the simple way. – hollsk Mar 12 '11 at 19:27
  • Set the language with ajax and refreshed the page as solution. Thanks. – Mustafa Mar 15 '11 at 12:10
  • Wouldn't it be simplest to put an attribute to your h1, p and so forth like

    ,

    and then just hide the other languages $("#lang_en").click(function () { $('p[lang|="sv"]').hide(); }); ? Instant language switching and no page-reloading would be neccessary.

     – Systembolaget Jul 21 '12 at 08:52
  • Can't you simple use CSS to toggle a 'Class' with text in it? Change i.e. 'Arthur' to a flag image and it would do exactly that, change text without page reload and without JS. https://codepen.io/aardrian/pen/OPgmPe – yello May 24 '18 at 01:53
0

check this plugin out:

http://keith-wood.name/localisation.html

It changes language 'on the fly' without going back to server side.

ngduc
  • 1,415
  • 12
  • 17
0

Image reload prototype if-modified i posted about image content update to selected language without reloading the page.

The image takes the value thats sent and updates to language/country code (which is bound to language) on DB and updates image content (characters) to match their keyboard layout..

Hope its some use

Community
  • 1
  • 1
Master V
  • 151
  • 1
  • 2