How can I switch the entire HTML file in a browser, by changing the selected language?











up vote
0
down vote

favorite












To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?










share|improve this question


















  • 1




    just use a <a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
    – GottZ
    Nov 19 at 15:15










  • you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
    – Pete
    Nov 19 at 15:23












  • Turk musun? @dafne deniz
    – sticky_elbows
    Nov 19 at 15:28















up vote
0
down vote

favorite












To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?










share|improve this question


















  • 1




    just use a <a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
    – GottZ
    Nov 19 at 15:15










  • you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
    – Pete
    Nov 19 at 15:23












  • Turk musun? @dafne deniz
    – sticky_elbows
    Nov 19 at 15:28













up vote
0
down vote

favorite









up vote
0
down vote

favorite











To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?










share|improve this question













To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?







javascript jquery html tags lang






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 19 at 15:13









Dafne Deniz

1




1








  • 1




    just use a <a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
    – GottZ
    Nov 19 at 15:15










  • you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
    – Pete
    Nov 19 at 15:23












  • Turk musun? @dafne deniz
    – sticky_elbows
    Nov 19 at 15:28














  • 1




    just use a <a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
    – GottZ
    Nov 19 at 15:15










  • you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
    – Pete
    Nov 19 at 15:23












  • Turk musun? @dafne deniz
    – sticky_elbows
    Nov 19 at 15:28








1




1




just use a <a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
– GottZ
Nov 19 at 15:15




just use a <a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
– GottZ
Nov 19 at 15:15












you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23






you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23














Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28




Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28












2 Answers
2






active

oldest

votes

















up vote
1
down vote













There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.



However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.






share|improve this answer




























    up vote
    0
    down vote













    If you don't want to use <a> tags for some reason, try this:



    //add event listener to your language buttons with their IDs:
    $('#lang1, #lang2, #lang3').on('click', function(event){

    //identify which language is being clicked
    var langClicked= "#" + $(this).attr('id');
    //take action depending on clicked button
    switch(langClicked){
    case '#lang1':
    //do something when its #lang1
    break;
    case '#lang2':
    //do something when its #lang2
    break;
    case '#lang3':
    //do something when its #lang2
    break;
    }
    });





    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














       

      draft saved


      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377569%2fhow-can-i-switch-the-entire-html-file-in-a-browser-by-changing-the-selected-lan%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      1
      down vote













      There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
      Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
      There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.



      However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.






      share|improve this answer

























        up vote
        1
        down vote













        There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
        Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
        There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.



        However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.






        share|improve this answer























          up vote
          1
          down vote










          up vote
          1
          down vote









          There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
          Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
          There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.



          However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.






          share|improve this answer












          There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
          Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
          There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.



          However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 19 at 15:39









          Anurag Sinha

          388412




          388412
























              up vote
              0
              down vote













              If you don't want to use <a> tags for some reason, try this:



              //add event listener to your language buttons with their IDs:
              $('#lang1, #lang2, #lang3').on('click', function(event){

              //identify which language is being clicked
              var langClicked= "#" + $(this).attr('id');
              //take action depending on clicked button
              switch(langClicked){
              case '#lang1':
              //do something when its #lang1
              break;
              case '#lang2':
              //do something when its #lang2
              break;
              case '#lang3':
              //do something when its #lang2
              break;
              }
              });





              share|improve this answer

























                up vote
                0
                down vote













                If you don't want to use <a> tags for some reason, try this:



                //add event listener to your language buttons with their IDs:
                $('#lang1, #lang2, #lang3').on('click', function(event){

                //identify which language is being clicked
                var langClicked= "#" + $(this).attr('id');
                //take action depending on clicked button
                switch(langClicked){
                case '#lang1':
                //do something when its #lang1
                break;
                case '#lang2':
                //do something when its #lang2
                break;
                case '#lang3':
                //do something when its #lang2
                break;
                }
                });





                share|improve this answer























                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  If you don't want to use <a> tags for some reason, try this:



                  //add event listener to your language buttons with their IDs:
                  $('#lang1, #lang2, #lang3').on('click', function(event){

                  //identify which language is being clicked
                  var langClicked= "#" + $(this).attr('id');
                  //take action depending on clicked button
                  switch(langClicked){
                  case '#lang1':
                  //do something when its #lang1
                  break;
                  case '#lang2':
                  //do something when its #lang2
                  break;
                  case '#lang3':
                  //do something when its #lang2
                  break;
                  }
                  });





                  share|improve this answer












                  If you don't want to use <a> tags for some reason, try this:



                  //add event listener to your language buttons with their IDs:
                  $('#lang1, #lang2, #lang3').on('click', function(event){

                  //identify which language is being clicked
                  var langClicked= "#" + $(this).attr('id');
                  //take action depending on clicked button
                  switch(langClicked){
                  case '#lang1':
                  //do something when its #lang1
                  break;
                  case '#lang2':
                  //do something when its #lang2
                  break;
                  case '#lang3':
                  //do something when its #lang2
                  break;
                  }
                  });






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 19 at 15:40









                  sticky_elbows

                  579




                  579






























                       

                      draft saved


                      draft discarded



















































                       


                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377569%2fhow-can-i-switch-the-entire-html-file-in-a-browser-by-changing-the-selected-lan%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Tonle Sap (See)

                      I get strange results when I access the Sqlitedatabase with Unity C# via XAMPP

                      Guatemaltekische Davis-Cup-Mannschaft