Build multiple language website using jQuery and JSON based methods

multi language website html5
jquery multi language json
how to change language of website using javascript
javascript multi language library
multilingual website html
javascript code for multi language
how do you serve a page with content in multiple languages in html
jquery multi language plugin

I'm trying to implement a Multi-language for one website. I prefer to use client script for changing the language between English and Traditional Chinese.

For example:

Create a client script to get/set the selected language:

$(document).ready(function() {
  // The default language is English
  var lang = "en-gb";
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

// get/set the selected language
$(".translate").click(function() {
  var lang = $(this).attr("id");

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

Then, build multiple languages dictionary to JSON structure:

var arrLang = {
    "en-gb": {
        "HOME": "Home",
        "ABOUT": "About Us",
        "CONTACT": "Contact Us",
    },
    "zh-tw": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
};  

Here's my HTML page:

<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
    <li class="lang" key="HOME"></li>
    <li class="lang" key="ABOUT"></li>
    <li class="lang" key="CONTACT"></li>
</ul>

A part of the code is shown below:

var arrLang = {
  "en-gb": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh-tw": {
    "HOME": "首頁",
    "ABOUT": "關於我們",
    "CONTACT": "聯絡我們",
  }
};

$(document).ready(function() {
  // The default language is English
  var lang = "en-gb";
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

// get/set the selected language
$(".translate").click(function() {
  var lang = $(this).attr("id");

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
  <li class="lang" key="HOME"></li>
  <li class="lang" key="ABOUT"></li>
  <li class="lang" key="CONTACT"></li>
</ul>

You can save the user's selected language with window.localStorage and read it when you load the page:

// save, in your .translate click handler
localStorage.setItem('lang', $(this).attr('id'));

// load, on DOMContentLoaded
var lang = localStorage.getItem('lang') || 'en-gb';

If the user hasn't selected a language, localStorage.getItem('lang') will return null and lang will be set to your default, 'en-gb'.

But why should your default be English? The browser knows what language it (and presumably, the user) prefers. You can access the browser's preferred language with navigator.language. Of course, that could be something like zh-SG which isn't in your language list, but should (probably?) render the page in Chinese. To handle this behavior, you can grab just the first two characters of the language code and use that as the key in your strings list:

var arrLang = {
    "en": {
        "HOME": "Home",
        "ABOUT": "About Us",
        "CONTACT": "Contact Us",
    },
    "zh": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
};

var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);

(You'll need to truncate the IDs of your translate buttons, as well.)

Of course, the browser's language could be pt-BR, so make sure to check for that too:

var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
if (!Object.keys(arrLang).includes(lang)) lang = 'en';

Multiple languages using Jquery and Json, Easy Multi Language Websites in Javascript I show you how you can make a website Duration: 9:35 Posted: Jul 1, 2018 The HTTP post method is used in most of the web sites to send the data to be processed to the specific server. Learn jQuery and JSON basics from scratch using a tutorial at Udemy.com. jQuery POST – jQuery supports HTTP post request using two basic methods : 1) post()

I would vouch for localStorage or sessionStorage.

// The default language is English
var lang = "en-gb";
// Check for localStorage support
if('localStorage' in window){

   var usrLang = localStorage.getItem('uiLang');
   if(usrLang) { // If key exists, then use that found in localStorage
       lang = usrLang
   }

}

fiddle

I would switch to ReactJS for such UI.

Easy Multi Language Websites in Javascript, The Multi Language jQuery plugin helps you create international webpages by populating web elements with JSON data in different languages. The plugin also has the ability to remember the last language selection using the HTML5 local storage. JSON, short for JavaScript Object Notation, is usually pronounced like the name “Jason.” To learn more about JSON in general terms, read the “An Introduction to JSON” tutorial. To begin thinking about where you may use JSON in your JavaScript programs, some general use cases of JSON include: Storing data

You can save the selected language on cookie.

You can use on setting and getting cookie.

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Source

Here is your updated fiddle: https://jsfiddle.net/20zo4wg8/1/

Translate The Webpage Using jQuery And JSON, A client wants to update their simple website (6 pages in total). What you can do is to make a JSON file for each language and then according� All we need is to enter the ‘Name’ of the employee in a textbox control on the web page. Using the jQuery .blur() function, a call will be made to a ‘Web Method’ Also Read: Introduction to WCF Meanwhile, you can also check this article: Calling a WCF Service using jQuery Ajax and JSON and Return Multiple values. WebService.asmx

What is the best way to create a multi-language site?, on your website you output the salutation using a special method. loadTranslations(current_locale); // loaded ru_RU.json either from FS How about just using some jquery to rewrite the html of some of those paragraphs? Calling a WCF Service using jQuery and retrieving data in JSON format (pass multiple input parameters and get multiple objects as output using a DataContract) In this example, the Country and Browser type will be passed as input parameters to the WCF Service in JSON format.

How to build a website with multiple languages most efficiently , I'm building a website the simple way — HTML, CSS, and vanilla jQuery, even though it means writing some functionality from scratch. Method 2: Method one discussed here is easy and useful for simple JSON objects but things can go wrong if we have an object with a complex hierarchy or an array of complex JSON objects. We can use the class-transformer tool for this purpose, It can be easily installed in your local system or node-project using the Node Package Manager .

Help: How to make a multilanguage website?, A good demo of how you can easily create a multilingual application using In this tutorial, you will learn an easy way to create a multilingual application based on resources language file. process: This method goes through the below steps: Deserialize the content of language file into json object named� The jQuery object gets these methods from the $.fn object. This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well. link Basic Plugin Authoring. Let's say we want to create a plugin that makes text within a set of retrieved elements green.

Comments
  • Permalink? (5 more to go)
  • Could use localStorage to store preferred language
  • Thank you very much for your clear instructions. I following your simple, easy to understand, step by step guide. It's working.
  • I make drawing FUN!!