2

I'm working on a bilingual site (spanish/english), I took the advice from the 2nd answer in this post.

This is the bit of code in the navbar that I use to pick a language:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span lang="es">Idioma</span>
        <span lang="en">Language</span>
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown06">
        <a class="dropdown-item coll-navbar language">
            <span lang="es">English</span>
            <span lang="en">Español</span>
        </a>
    </div>
</li>

And this is the js code:

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

This is an example of the code implemented:

<div class="title col-12 col-md-8">
    <h2 class="align-center" lang="es"><strong>
            Costura</strong></h2>
    <h2 class="align-center" lang="en"><strong>
            Sewing</strong></h2>
</div>

And, it works great, the only problem is that when I choose the 2nd language and I change the html page, it returns to the first one (spanish in this case); how can I keep, when selected, the 2nd language across all the html's?

Thanks in advance,

Gerardo
  • 81
  • 7
  • Why don't you use a query parameter in the URL? http://www.example.com/page?lang=es You can access the parameters through JavaScript by following this example: https://davidwalsh.name/query-string-javascript – Tony Drummond Oct 29 '20 at 01:10
  • I should also add that you're tagging this with Node.js, yet your code is jQuery. Are you using Node or just making regular HTML sites you'll just upload to a web server? – Tony Drummond Oct 29 '20 at 01:12
  • Thanks Tony Drummond, I changed the tag to jQuery - and, I'm making a regular html site that I latter upload to a web server – Gerardo Oct 29 '20 at 01:26
  • This must be a small site if you're just uploading plain HTML pages. Keep in mind you'll have to change every link as well. I suppose you could write a simple jQuery function that adds a click event to all links $("a").click(function(e)....) then do e.preventDefault(), grab the URL and modify via JavaScript, then do window.location.replace(url)... to navigate to page. – Tony Drummond Oct 29 '20 at 01:37

2 Answers2

1

Method 1:

You can use Jquery Cookie to persist the language values.

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();

  if ($.cookie('lang') === 'en') {
     $.cookie('lang', 'es', { expires: 7 });
  } else {
     $.cookie('lang', 'en', { expires: 7 });
  }
});

Then run the below code block to check for any lang values when the page loads:

if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    document.documentElement.setAttribute('lang', lang);
} else {
    document.documentElement.setAttribute('lang', 'en');

Method 2:

Use Local Storage API to resolve the issue:

<html>
    <head>
        
    </head>

    <body>
        
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span lang="es">Idioma</span>
                <span lang="en">Language</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdown06">
                <a class="dropdown-item coll-navbar language">
                    <span lang="es">English</span>
                    <span lang="en">Español</span>
                </a>
            </div>
        </li>

        <div class="title col-12 col-md-8">
            <h2 class="align-center" lang="es"><strong>
                    Costura</strong></h2>
            <h2 class="align-center" lang="en"><strong>
                    Sewing</strong></h2>
        </div>



    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script type="text/javascript">

        var lang = localStorage.getItem("lang");
        if (lang){
            if (lang == "en"){
                $('[lang="en"]').show();
                $('[lang="es"]').hide();
            }else{
                $('[lang="es"]').show();
                $('[lang="en"]').hide();
            }
        }
        
        
        $('.language').click(function() {
           
            $('[lang="es"]').toggle();
            if (lang === 'en') {
                localStorage.setItem('lang', 'en');
                $('[lang="en"]').show();
                $('[lang="es"]').hide();
            } else {
                localStorage.setItem('lang', 'es');
                $('[lang="es"]').show();
                $('[lang="en"]').hide();
            }
        });
    </script>
    </body>
</html>
Harshana
  • 5,151
  • 1
  • 17
  • 27
  • Thanks, I downloaded jquery.cookie.js, added the reference after the jQuery library, modified the first part you wrote, but I just don't get to run the 2nd part when the page loads (I tried in a function in head, after all the js references at the end of body, in separated js file...), can you tell me please how to run it? – Gerardo Oct 29 '20 at 06:18
  • I have edited the answer and added a new method. You can use the second one as well. – Harshana Oct 29 '20 at 08:19
  • Thanks @Harshana, I use your 2nd method to find the solution I posted. – Gerardo Oct 29 '20 at 18:57
0

This is the solution I arrived at, it's based mostly in @HarshanaSerasinghe 2nd answer:

<script type="text/javascript">
    var lang = localStorage.getItem("lang");
    if (lang) {
        if (lang == "en") {
            $('[lang="en"]').show();
            $('[lang="es"]').hide();
        } else {
            $('[lang="es"]').show();
            $('[lang="en"]').hide();
        }
    } else {
        $('[lang="en"]').hide();
        localStorage.setItem('lang', 'es');
    };
    $('.language').click(function() {
        $('[lang="es"]').toggle();
        $('[lang="en"]').toggle();
        if (lang === 'en') {
            localStorage.setItem('lang', 'es');
        } else {
            localStorage.setItem('lang', 'en');
        }
    });
</script>

In case the .language wasn't clicked there was no value in lang, so, when I loaded the site the two languages showed up, I solved this by adding an else clause hiding one language and setting a value to the lang var. onclick, first I toggled both languages, then I modified accordingly the value in lang.

Gerardo
  • 81
  • 7