Dropdown menu on refresh changes javascript

Question

I have implemented a navbar uisng bootstrap 4,in which I have a language dropdown, on selection translates the page, When dropdown language is selected, the url will change and dropdown not showing the correct selection ,

should I do ajax call for not refresh/reload the page and change the content. Please help

<body>
  <nav>
    <div class="dropdown">
      <button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
        English
      </button>
      <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem();">
        <a class="dropdown-item" href="/en">English</a>
        <a class="dropdown-item" href="/fr">French</a>
      </div>
    </div>
  </nav>
</body>

<script>
 function handleLanguage() {
    document.getElementById("languagelist").click();
  }

  function handleLanguageItem() {
    var element = document.getElementById("languagelist");
    for (var i = 0; i < element.children.length; i++) {
      (function(index) {
        element.children[i].onclick = function() {
          var thetext = element.getElementsByTagName('a')[index].innerHTML;
          var buttonelement = document.getElementById("language")
          buttonelement.innerText = thetext;
        }
      })(i);
    }    
  }

</script>

Can you explain in steps what should happen and what happens now? Do you have different .html files for each language? — jonahe, Jun 23 '19 at 15:17
@jonahe thanks for reply, I have .json file for each language , so when i click on `french`, backend (`href="\fr"`) sends the file to change the content in appropriate langauge, translation part works fine, but the page refreshes and dropdown shows first option instead of selected — miyavv, Jun 23 '19 at 15:20
@jonahe when i select the dropdown should change the url and show the selected dropdown. when i select `french`, will go to `/fr` nodejs route and render the page with url change and selected dropdown show french first ,In my code, url change and translation works but shows always `english` option — miyavv, Jun 23 '19 at 15:29
Sorry, I'm finding it hard to see a solution without playing with the actual code. I found a similar question with a code sample that I modified to show that you can save the selected value in localStorage (which will remember your value even after a page refresh). But I can't really modify it to fit your example. Maybe you can. Good luck. https://jsfiddle.net/jonahe/rtx58cLg/6/ — jonahe, Jun 23 '19 at 16:05
Maybe this link can help you too, combined with saving the selected language in localStorage: https://www.bootply.com/118698 — jonahe, Jun 23 '19 at 16:11
@jonahe please have a look https://stackoverflow.com/questions/56729053/change-href-url-in-all-pages-in-javascript-nodejs I have added some code — miyavv, Jun 24 '19 at 01:58

score 0 · Answer 1 · answered Jun 23 '19 at 16:15

You're changing the page, so the javascript you're running won't do anything after you click, you should change the button's text via the server when the page loads, based on the path. But, here's a solution with javascript (not optimal because it requires the page to load first):

let languageMap = {
    "en": "English",
    "fr": "French"
};

document.querySelector('#language').innerText = languageMap[location.pathname.substr(1, 2)]; // Get the language short from the 2 first characters after the / in the URL

score 0 · Accepted Answer · answered Jun 24 '19 at 07:26

I'm not super familiar with .ejs, but (looking at the other code you posted in your comment) it seems like you should be able to "pass along" the selected language from req.params.lang and then have it available in your .ejs-templates.

Something like:

router.get('/:lang', function (req, res) {
    const languageMap = {
      "en": "English",
      "fr": "French"
    };

    const selectedLang = req.params.lang;
    const name = languageMap[selectedLang];
    // pass the value down to index.ejs which in turn renders header.ejs 
    res.render('index.ejs', { selectedLanguageName: name });
});

And then in your header.ejs. You should have selectedLanguageName available to you, using the <%= yourVariableNameHere %> syntax

<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
    <%=  selectedLanguageName %>
  </button>
  <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
    <a class="dropdown-item" href="/en">English</a>
    <a class="dropdown-item" href="/fr">French</a>
  </div>

I found some useful information in this tutorial: https://scotch.io/tutorials/use-ejs-to-template-your-node-application

It's possible that because index.ejs is includes as a "partial" you have to explicitly pass down the variable to it when you include it.

<%- include('header.ejs', {selectedLanguageName: selectedLanguageName}); %>

or something like it.

Ejs seems to have pretty good documentation for the basics, it's propably worth checking out https://ejs.co/#docs

thanks a lot for helping, if i have nav items with links in navbar (about, contact pages), is it possible to change the url?? like /fr/about, /fr/contact — miyavv, Jun 24 '19 at 08:39
I added a possible answer in your other post https://stackoverflow.com/a/56731637/4763083 — jonahe, Jun 24 '19 at 09:33

Dropdown menu on refresh changes javascript

2 Answers2

Linked