Multi-language page with jquery and javaScript functional for IE [duplicated]

Question

Multi-language page with jquery and javaScript functional for IE [duplicated]

Navigation

#1 by (0 votes)

0

I need to make my HTML multilanguage, I have seen on the Internet what can be done with php but there are people who have done it with jQuery and javascript. I know that in principle the part of loading the language would have to be done from the server but I want to do it with jQuery.

Until now, I've tried to make this little example

<select id="idioma" onchange="cambiaId()">
  <option value="es">Español</option>
  <option value="en">Ingles</option>
</select>
<script>
  var _lang = $("#idioma").val();

  var aa = {
    en: "Hello",
    es: "Hola"
  };
function cambiaId(){
    _lang = $("#idioma").val();
    alert(_lang)
}
</script>
<div id="a">
  <script>
    document.write(aa[_lang])
  </script>
</div>

This works correctly when the html is loaded, pick up the selected language and type. The problem is when I change the language I updated the lang variable, but I do not know how to update the page so that it changes the values.

In the example only one variable is seen and putting it into the function and updating it is easy. The problem comes when you have to update 200 variables. What I need is to update in some way the text that I write with the variables.

I think the most correct way to do it would be to change the value of the select to save the new value in a cockie and when reloading the page, leave as selected the value passed by the cockie

EDITION

After showing me the answer to my problem in this question to implement it in my html, I need to make it functional for IE9.

I have created a new js called multilanguage.js and it has the following code:

frases = {
    "es": {//Literales en castellano},
    "en": {//Literales en ingles}
/**
 * Función que cambia todos los elementos al nuevo idioma.
 *
 * @param {string} lang
 */
function cambiarIdioma() {
  lang = $("#idioma").val();
  // Habilita las 2 siguientes para guardar la preferencia.
  // lang = lang || sessionStorage.getItem('app-lang') || 'es';
  // sessionStorage.setItem('app-lang', lang);

  var elems = document.querySelectorAll('[data-tr]');
  for (var x = 0; x < elems.length; x++) {
    elems[x].innerHTML = frases.hasOwnProperty(lang)
      ? frases[lang][elems[x].dataset.tr]
      : elems[x].dataset.tr;
  }
}

To select the language I do so:

<div>
        <span data-tr="cambiaIdioma"></span>
        <select id="idioma" onchange="cambiarIdioma()">
            <option data-tr="idioma-es" value="es"></option>
            <option data-tr="idioma-en" value="en"></option>
        </select>
    </div>

This solution works for me in Google Chrome and Firefox but when I do it in IE it gives me the following error.

Unable to get the 'tr' property of null or undefined reference

And it points me to this line of the script:

frases[lang][elems[x].dataset.tr]

javascript jquery html internet-explorer

asked by Lombarda Arda 11.04.2017 в 12:17

source

1 answer

Doctrine and CodeIgniter 3 Does not recognize the class how can I get the following json file from a php query - sqlserver

score 0 · Answer 1

Since you want to refresh the page, I used a JSFiddle because the SOes snippet does not allow LocalStorage.

Demo: link

It is practically what you have but refreshing the page and saving the last selected language in LocalStorage

var lista = document.getElementById("idioma");
var idioma = localStorage.getItem("idioma");

var aa = {
  en: "Hello",
  es: "Hola"
};

if (idioma) {

  lista.value = idioma;
  document.getElementById("a").innerHTML = aa[idioma];
} else {

  document.getElementById("a").innerHTML = aa[lista.value];
}

var _lang = $("#idioma").val();

$("select").on("change", function() {
  cambiaId();
  location.reload();
});

function cambiaId() {
  _lang = $("#idioma").val();
  alert(_lang);
  localStorage.setItem("idioma", _lang)

}

<select id="idioma">
      <option value="es">Español</option>
      <option value="en">Ingles</option>
    </select>

<div id="a">
</div>

However, as Mariano says in the comments of your question, why do not you put the value assignment within your cambiaId() ? So you load the same elements but you do not have to refresh the page.

var _lang = $("#idioma").val();

var aa = {
  en: "Hello",
  es: "Hola"
};

function cambiaId() {
  _lang = $("#idioma").val();
  alert(_lang)
  document.getElementById("a").innerHTML = aa[_lang];
}
document.getElementById("a").innerHTML = aa[_lang];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="idioma" onchange="cambiaId()">
      <option value="es">Español</option>
      <option value="en">Ingles</option>
    </select>

<div id="a">
</div>