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>
Improve this question

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

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?
You can read in the user's language using some JavaScript - check this other answer out. 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.
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?
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.
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.
|
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/

Improve this answer

3 Comments

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!
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 <script></script> elements inside my <head></head> elements. to the best of my knowledge this should be right.
If you put the script in <head>, you start listening to the select box before it exists. Put the scripts at the absolute bottom of your body.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.