6

Is it possible to change the language of content inside a paragraph <p> tag dynamically choosing the desired language from a <select> dropdown list using JQuery? Also, the paragraph incorporates contenteditable="true" to allow for editing to the desired language.

JSFiddle

Therefore, I have created a Fiddle in order to better understand what I am trying to solve. If an updated fiddle could be provided, it would be much appreciated as I am still new to coding.

Thank You!

HTML: 

 <select>
    <option disabled selected>
        Change Language of Text
    </option>
    <option>
        English [Default]
    </option>
    <option>
        Chinese
    </option>
    <option>
        Japanese
    </option>
    <option>
        French
    </option>
    <option>
        Spanish
    </option>
</select>
<hr>
<h4><b>Change below text to language from dropdown list
dynamically:</b></h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus
nulla velit, eget mattis ligula lobortis consectetur. Aenean dictum libero
vel augue faucibus, nec sodales enim ultricies. Cras sollicitudin volutpat
ante sed sollicitudin. Nam id dui molestie, ultricies ipsum sed, finibus
justo. Aenean elementum tristique mauris, vel posuere mauris hendrerit sit
amet. Donec ornare justo nec lectus lobortis efficitur. Integer suscipit
erat a sagittis pretium. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Donec
tortor justo, gravida eget erat ut, imperdiet mattis ligula. Suspendisse
potenti. Vestibulum dapibus turpis non sem blandit rutrum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Duis nec sem dui. Mauris placerat sed risus vel semper. Cras auctor commodo
erat, non iaculis tellus dapibus vel. Aliquam eu tellus arcu. Vivamus
ullamcorper dapibus urna. Ut justo turpis, pulvinar nec venenatis ut,
pharetra non risus. Morbi dictum turpis id porta malesuada. Morbi nec ante
sit amet est suscipit viverra sit amet ac justo. Curabitur accumsan lorem
vel vestibulum tempor. Suspendisse ultricies justo velit, aliquam posuere
nisl blandit eget. Etiam eget sapien pharetra, porta nunc et, laoreet
risus. Integer mattis justo ut nibh condimentum ultricies. Quisque euismod
neque vel dictum facilisis. Vestibulum nisl nibh, placerat a sapien at,
dignissim tincidunt velit. Curabitur luctus, velit viverra scelerisque
aliquam, risus ante eleifend neque, at dictum quam nisi scelerisque turpis.
In vitae tincidunt lectus. Aliquam ultrices ultrices dapibus. Vivamus
interdum fringilla ipsum in faucibus. In tempor congue nisi, eu faucibus mi
faucibus quis. Nam suscipit gravida nisi id laoreet. Sed id euismod tellus.
Cras ac imperdiet turpis. Vivamus et ligula luctus, vestibulum mi eget,
cursus odio. Aenean est tellus, consequat id dolor in, bibendum suscipit
lacus. Vestibulum a justo at tortor tincidunt sodales. Donec placerat
pulvinar bibendum. Curabitur egestas tempor tortor fringilla suscipit. Cras
sed dignissim neque. Cras enim urna, hendrerit vitae venenatis a, feugiat
hendrerit urna. Quisque imperdiet, urna id mattis dignissim, sapien leo
ultrices mauris, vel interdum ligula ligula sit amet diam. Nunc hendrerit,
massa id blandit interdum, nibh magna ultrices ligula, nec mollis lectus
turpis id mauris. Etiam commodo risus eu metus egestas, sit amet accumsan
purus consequat. Curabitur dignissim turpis nulla, viverra auctor leo
interdum vel. Aenean sed quam est. Pellentesque laoreet consequat sem ac
sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
imperdiet, augue non porta auctor, neque augue tempus turpis, nec convallis
orci diam nec sapien. Mauris egestas porttitor nunc in accumsan. Nullam eu
massa vel neque suscipit pretium. Praesent dapibus ornare elit, gravida
tristique magna commodo in. Morbi id urna velit.</p>
Prajwal Shrestha
  • 524
  • 3
  • 12
Dave
  • 766
  • 9
  • 26
  • 7
    You need to have the text pre-translated in to the specified other languages so that you can just set it with the `text()` method, or you would need to hook in to a third party API (such as Google Translate) which will do this on-the-fly for you. Here's the details you need on Google Translate: https://cloud.google.com/translate/v2/using_rest#Translate. Bear in mind there are usage limits on a free account. – Rory McCrossan Dec 26 '15 at 11:49
  • However, the paragraph incorporates contenteditable="true" for the user to edit the text in the desired language. Therefore, Google Translate may not work for this purpose. – Dave Dec 26 '15 at 11:54
  • If that is the case, Google Translate is the *only possible* way to do it, as it would have to be done on the fly. See the page I linked to. It's a straightforward AJAX call with the content to be translated. – Rory McCrossan Dec 26 '15 at 11:55
  • However, a usage limit may apply. Are there any other free solutions available that can translate on the fly from a select element? – Dave Dec 26 '15 at 12:06
  • 2
    using Google translate is the best on the fly solution you can have for your need.The usage limit is not be worried upon it`s "$20 per 1 M characters of text" That is pretty cheap @Dave – sid Dec 26 '15 at 12:12
  • I guess you could refresh the page where you switch the tag `` with say, `` if they chose French. Then, some browsers will automatically ask if you want to convert the content to that other language. – Volomike Dec 31 '15 at 18:10
  • @sid If Google Translate is done from Javascript instead of from the server, if that's possible, then usage limits would not be such a huge concern. – Volomike Dec 31 '15 at 18:11
  • 1
    Question appears to already have been answered: http://stackoverflow.com/q/12243818/105539 – Volomike Dec 31 '15 at 18:13

0 Answers0