Changing language with toggle button bootstrap

Question

I'm learning to code with bootstrap, html, css, js. And I'm wondering if it's possible to modify the language of my webpage with a toggle button? I'm using bootstrap toggle which can set events like this:

<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
  $(function() {
    $('#toggle-event').change(function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
    })
  })
</script>

And I also saw this thread on stack about changing languageusing element.lang.

And I'm not able to 'mix' the two methods to change the language on deman simply by clicking on the toggle button, and I don't understand why =/

Here's my attempt:

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle.min.js"></script>

<body class="fr" id="test1">
  <p lang="en">
    Je parle la baguette
  </p>
  <p lang="fr">
    I speak the baguette
  </p>
  <input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En">
<!--<script>
      $(function() {
        $('#toggle-event').bootstrapToggle({
         on: document.body.className= 'fr',
         off: document.body.className = 'en'
        });
      })
</script>-->
<script>
  $(function() {
  $('#toggle-event').change(function() {
    $('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
  });
});
</script>
</body>

CSS:

body.en :lang(en) {
  display: none;
}
body.fr :lang(fr){
  display: none;
}

https://jsfiddle.net/mttkchfc/1/

Answer 1

There are a number of issues with your attempt.

The most obvious one is that the languages are the wrong way round. Your "en" section contains French text, and the "fr" one contains English text!

The CSS is also mangled compared to the example you cited - look more carefully at how the :lang part is constructed in the original. In the original example, it is used to hide the opposite language, whereas you're using it to hide the same language. You've got the concept the wrong way round.

Also, this line is total nonsense:

$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'

There's no such jQuery function as ".body" - if you look in your browser console (press F12, if you didn't know, to open the Developer Tools in most modern desktop browsers), you'll see this error reported when you click on the toggle.
"classname" is a native JS property, it doesn't work on jQuery objects, which this would be if it was valid
If it was possible to use a function like "body" to set the body content, all it would do is set the content of the whole <body> section to "Toggle: true", or similar. This would be useless.
Even if all of that were to be ignored, and it were capable of setting the class, it only ever sets it to English - you wouldn't be able to change back to French.

The example in the link you gave, using document.body.className works perfectly well. You just need to vary the class name depending on whether the toggle is on or off. I have chosen to store the class names in data- attribute values "true" and "false", which of course correspond to the string representation of a boolean. This means we can neatly use the value of the "checked" property of the toggle to fetch the correct data- attribute value and use that as the new class name, without any tedious if or switch statements:

CSS

body.en :lang(fr) {
  display: none;
}
body.fr :lang(en){
  display: none;
}

HTML

<body class="en">
  <p lang="fr">
    Je parle la baguette
  </p>
  <p lang="en">
    I speak the baguette
  </p>

  <input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="English" data-off="French" data-true="en" data-false="fr" >
</body>

JS

$(function() {
  $('#toggle-event').change(function() {
    document.body.className = $(this).data($(this).prop("checked").toString());
  });   
});

PS Your JSFiddle didn't work at all because you didn't include jQuery, your scripts were in the wrong section, and you have to reference bootstrap etc as external resources - the inline links you provided were pointing to local resources which don't exist in a JSFiddle environment. I've fixed that for you, plus updated it so it works as you intend:

https://jsfiddle.net/mttkchfc/4/

Changing language with toggle button bootstrap

Question

1 answers

solution1
5 ACCPTED 2017-04-20 09:23:20

Changing language with toggle button bootstrap

Question

1 answers

solution1 5 ACCPTED 2017-04-20 09:23:20

solution1
5 ACCPTED 2017-04-20 09:23:20