2

I am currently using dreamweaver and I am trying to build a simple translator function. I have a drop down with multiple options (each language designated by specialized id's) and I want the user to select the language of choice and have the chosen HTML string translated. So far I have tried everything and I can't seem to get this to work, and this I thought would be the simplest way. Any thoughts or edits would be huge help. p.s. I'm a total beginner

JQuery:

$("#French").click(function(){
    $("#AppartmentB").replaceWith("maison");
});

HTML:

<select name="selectmenu" id="selectmenu">
    <option value="option1" id="English">English</option>
    <option value="option2" id="French">French</option>
</select>


<div data-role="page" id="AppartmentPage" class="page">
   <h1 class="TopText" align="center" id="AppartmentT">Appartment</h1>
   <h1 class="BotText" align="center" id="AppartmentB">Appartment</h1>
</div>
rlemon
  • 17,518
  • 14
  • 92
  • 123
Michael Voulgaris
  • 131
  • 2
  • 6

2 Answers2

4

I put together a basic example. Essentially, the JS has a database of translations. I've only put in one item with 1 key, text. The JS listens for any changes to the language select dropdown menu.

This is essentially how many localization libraries work. Check out jquery-localize if you want to implement something more robust.

// Translation database
var translations = {
  'en': {
    'text': 'Apartment'
  },
  'fr': {
    'text': 'Maison'
  }
}

// Li
$("#languageSelect").change(function() {
  var str = '';
  $("#languageSelect option:selected").each(function() {
    var langCode = $(this).val();
    str += translations[langCode]['text'];
  });
  $("#translatedText").text(str);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="languageSelect">
  <option value="en" selected="selected">English</option>
  <option value="fr">French</option>
</select>

<div data-role="page" id="AppartmentPage" class="page">
  <h1 id="translatedText">Apartment</h1>
</div>
Joseph
  • 66
  • 4
  • This is amazing, this has been plaguing me for weeks. I am trying to have the program as a whole be sensitive to translate all the main text to the locale language the users computer/mobile device is in, with the ability to selectively translate other strings on the page. I was thinking of using xml locale language set up to make the program respond to the users locale language, and the above example for the selective translation ability. What are you thoughts to that? – Michael Voulgaris Jul 10 '16 at 20:36
  • You can read in the user's language using some JavaScript - [check this other answer out](http://stackoverflow.com/questions/8199760/how-to-get-the-browser-language-using-javascript). I'm not sure of how you'll be architecting your application but I would recommend pushing your localization/translation to the backend. Otherwise, things could get heavy quickly considering you might end up loading in a giant translation database every time a page loads. Detect the user's language on the backend and do the bulk of the initial translation (if needed) there. – Joseph Jul 10 '16 at 20:52
  • does this same method work if the user has no access to the internet? if not, is there a way I can build a storage of the storage of the strings and just have the text swap once the user selects their language of choice? – Michael Voulgaris Jul 10 '16 at 21:48
  • Can you explain your application a bit more to provide me with some more context? You can break up the languages into a series of JSON files and fetch them when needed (e.g. only fetch translations.fr.json when the user's language is French). In fact, I recommend storing the translation "database" in a JSON file rather than having it in the JS directly like I had in my example. I wouldn't recommend fetching a JSON file every time the user wants to translate a small, single snippet of text on a page though. – Joseph Jul 10 '16 at 22:03
  • To answer your original question though: yes, you can store your translations in a JSON file which you can then load when the user selects their language. – Joseph Jul 10 '16 at 22:06
  • So to do an example my idea looks like

    Airport

    Airport

    so I want the text in the

    to recognize the language of the users phone and adjust accordingly, and I want the user to be able to use my drop down to change the language of the

    to their desired language. But I want the application to be able to function offline, so no connection to a server, so I need to store it somewhere within the application itself

     – Michael Voulgaris Jul 11 '16 at 01:14
  • I see. In that case, you can perhaps make the browser cache the translation JSON somehow (e.g localStorage or AppCache). You would then just pull the JSON from cache if it's available. This way, it doesn't download the entire JSON file every time. – Joseph Jul 12 '16 at 02:09
  • The Above code is hard-coded, this will not work for dynamic content. – Samson Jun 17 '19 at 05:57
0

You're replacing the whole matched tag instead of its contents, and you can't listen to a click event on a select option.

Try to listen to the change event of your select element, and use the languages as option values.

HTML:

<select name="selectmenu" id="selectmenu">
  <option value="english">English</option>
  <option value="french">French</option>
</select>

JS:

$("#selectmenu").on('change', function() {
  var chosenLanguage = $(this).val();
  switch (chosenLanguage) {
    case 'french':
      $('#AppartmentB').text('Maison');
      break;
    case 'english':
      $('#AppartmentB').text('Appartment');
      break;
  }
});

See a full working example here: https://jsfiddle.net/r76hLLte/

1sloc
  • 1,180
  • 6
  • 12
  • This is great, thank you for including the example as well, I am trying to make the program be able to run offline so this is perfect! – Michael Voulgaris Jul 10 '16 at 20:42
  • I have tried this answer in my program and it didn't seem to work. I have my select menu on my home page, and in the next page I have my translated words. I assume though that since I'm getting the by their values and id's that it shouldn't matter. I've also put my JS inside elements inside my elements. to the best of my knowledge this should be right. – Michael Voulgaris Jul 10 '16 at 21:37
  • If you put the script in ``, you start listening to the select box before it exists. Put the scripts at the absolute bottom of your body. – 1sloc Jul 10 '16 at 22:25