how to build multiple language website using pure html, js, jquery?

Question

i am using html to build pages. The problem is how to build multiple language switch? Language translate is not issue, i have the terms. However, I don't know how to switch btw every page through the language button/dropdown list on the menu bar? If there is a existing example or template, that would be even better. Thanks in advance.

I believe that you have only used HTML so far. Being so, you can use JavaScript (And JQuery) inside the — Xedret, Sep 01 '17 at 22:41
you have here a possible solution for a multilingue jQuery approach: https://stackoverflow.com/a/47612798/1243247 — João Pimentel Ferreira, Dec 02 '17 at 21:37

M. Waheed · Accepted Answer · 2018-04-30T05:58:30.257

71

ok. as an edit to the my answer, please follow:

1 - create a folder called language and add 2 files to it ( es.json and en.json )

The json files should be identical in structure but different in translation as below:

en.json

{ 
    "date": "Date", 
    "save": "Save",
    "cancel": "Cancel" 
}

es.json

{ 
    "date": "Fecha", 
    "save": "Salvar",
    "cancel": "Cancelar" 
}

2 - Create an html page containing a sample div and put 2 links to select the language pointing to the js function listed in step 3.

<a href="#" onclick="setLanguage('en')">English</a> 
<a href="#" onclick="setLanguage('es')">Spanish</a>

<div id="div1"></div>

3 - Create 2 java script functions to get/set the selected language:

<script>
var language; 
function getLanguage() {
(localStorage.getItem('language') == null) ? setLanguage('en') : false;
$.ajax({ 
url:  '/language/' +  localStorage.getItem('language') + '.json', 
dataType: 'json', async: false, dataType: 'json', 
success: function (lang) { language = lang } });
}

function setLanguage(lang) {
localStorage.setItem('language', lang);
}
</script>

4 - Use the variable language to populate the text.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

    $(document).ready(function(){
    $('#div1').text(language.date);
    });

    </script>

I believe this answers the question as I have the same concept implemented cross multiple sites.

Note: You can make instant translation ( without reload ) just by using an onclick event other than document.ready from JQuery. It depends on your scenario.

edited Apr 30 '18 at 05:58

answered Sep 01 '17 at 22:51

M. Waheed

877
1
8
8

is that possible i get an template/example for ur framework? sorry, im pretty new for front end. – Laodao Sep 01 '17 at 23:26
Could anyone explain to me where getLanguage() gets called or would get called? – Axelle Nov 21 '18 at 19:03
2

Also, when hosting this the ajax generates a CORS error due to the data type being json. Is there a workaround for this? – Axelle Nov 21 '18 at 19:12
@axelle , I know it is late but maybe others find it useful. getLanguage() shall be loaded when document is ready. And yes, CORS could show up if the language json files are not within the same domain which is not really related to translation. As a hint, either configure security to except requests or use jsonp. – M. Waheed Jan 04 '19 at 17:33
@M.Waheed I had tried to configure security to allow certain CORS connection, but it kept failing - most likely due to bad configuration. I indeed ended up using jsonp, which worked :) – Axelle Jan 08 '19 at 15:09
is this SEO friendly? – reggie Mar 25 '19 at 15:29
Not directly. Keep in mind that this design is specific to the interface of the website not the content. Any way, supporting SEO could be achieved by setting default ( fallback ) values as regular text. – M. Waheed Mar 25 '19 at 16:12
This is very hard to work with, as I have tried it in the past. The big problem is that it changes the words inside words (ex English to French : "hello" can be translated to "enfero", because it translated "hell" to "enfer" first). You should instead specify the translations for each element's entire text content and change them with javascript, instead of searching for the individual words in the html document. So change the entire block of text. – TheOwl Apr 24 '22 at 00:06

score 16 · Answer 2 · answered Sep 02 '17 at 00:30

Since you're new to the front end, I thought of giving you a working template/example of a very basic attempt to simulate a page in 2 different languages using iframes. This is will at least give you an idea on an alternative way on how one can do it, at least until M. Taha finishes his work on the general purpose front end framework that provides multi-language UI.

Assuming this and this are your versions of the page in English and French, respectively, you could do it like that (fiddle here):

<html>
<body>
<select id="langselector" onchange="loadlang()">
  <option value="en">English</option>
  <option value="fr">French</option>
</select>
<p></p>
<iframe id="contents" src="https://jsfiddle.net/q2nw8o35/" width="1366" height="768" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script>
function loadlang()
  {
  var lng = document.getElementById("langselector").value;
  var cnt = document.getElementById("contents");
  switch (lng)
    {
    case "en":
      cnt.src = "https://jsfiddle.net/q2nw8o35/";
    break;
    case "fr":
      cnt.src = "https://jsfiddle.net/jmn8c9tj/";
    break;
    }
  }
</script>
</body>
</html>

Now if you build the versions of your page and just replace the values of the src-s with the path towards your page versions on the server, you can make it happen, all inside an iframe. With a little experimenting (go play on JSFiddle, it's fun) and maybe help, you can progress from there, and look to make it the right way, like M.Taha is trying to (e.g. more ellaborate JSON files, using local storage / cookies to "remember" your previous settings, and so on).

My example is not meant to deliver a final framework or such, but it should be looked at more like a very basic working example that can achieve what you wanted for the time being, or until a better solution/answer is provided.

It's amusing how some people like to downvote a working example ... without providing one (or even an answer). Just because a question is "too broad" doesn't mean answers should be downvoted too, even if they're not perfect ... and especially if they work. — Yin Cognyto, Sep 02 '17 at 02:50
People should define 'too broad'. Does a question have to be specific code related? different people can have different opion abt if a question is too broad. For those people who answered this question, it seems they don't think that's the case. Moreover, some of them actually work on some framework to achieve this. Not sure why they got down voted for this. Sorry for them. — Laodao, Sep 03 '17 at 23:58
Generally, it is indeed better to provide more specific details when asking (e.g. code, goal, possible dependencies, etc), since this is read by other people as well, and some of them look for clarity or specific aplicability. Aside from that, I didn't find it too broad at all (or deserving downvotes): you just wanted a basic example so you can further work on that base, that's all. I think it was marked as too broad because there are a lot of different scenarios possible (see Xedret's comment), and a lot of different ways to achieve what you were looking for. — Yin Cognyto, Sep 04 '17 at 02:29

how to build multiple language website using pure html, js, jquery?

2 Answers2

Linked