CODEWITHSUNDEEP
javascriptapigoogle-translate
Justin Erswell
Justin Erswell

Reputation: 708

Google Translate / Basic Javascript issue

Given the following

    <textarea style="width: 150px; height: 150px" id="sourceText">Hello Justin how are you today?</textarea>
<textarea style="width: 150px; height: 150px" id="translation"></textarea>
<button id="translateMe" value="Translate!" onclick="translateThis();"></button>
<script>
  function translateText(response) {document.getElementById("translation").innerHTML += response.data.translations[0].translatedText;}
  function translateThis(){
      var sourceText = escape(document.getElementById("sourceText").innerHTML);
      var source = 'https://www.googleapis.com/language/translate/v2?key=MY_KEY_HERE&source=en&target=es&callback=translateText&q=' + sourceText;
      return source;
  }
</script>

How can I hook up this button to process the function to put the translated text in to the translation text area?

Upvotes: 1

Views: 4135

Answers (3)

Justin Erswell
Justin Erswell

Reputation: 708

I solved my question this way.

<script>          
function callbackDescription(response) {
     document.getElementById("siteDesc" + langCode).innerHTML = response.data.translations[0].translatedText;
              }

              var langCode;

              function translateToLangCode(lang) {
                  langCode = lang;
                  translateDescription();
              }

              function translateDescription() {
                  var faciDescScript = document.createElement('script');
                  faciDescScript.type = 'text/javascript';
                  var sourceText = escape(document.getElementById("siteDescEN").innerHTML);
                  var faciDesc = 'https://www.googleapis.com/language/translate/v2?key=API_KEY_HEREsource=en&target=' + langCode.toLowerCase() + '&callback=callbackDescription&q=' + sourceText;
                  faciDescScript.src = faciDesc;
                  document.getElementsByTagName('head')[0].appendChild(faciDescScript);
              }
</script>

Upvotes: 0

Jacob Mattison
Jacob Mattison

Reputation: 51072

You've left out a step. The "source" variable needs to become the src attribute of an HTML script element.

Take a closer look at their "getting started" doc.

By the way, other folks are pointing you towards AJAX, but that won't actually work. Because the Google URL is not hosted on your site, you will be prevented from using AJAX by the "same origin" policy. The Google approach is meant to either use an API call from server-side code (e.g. Java, ASP.NET, Ruby) or be used directly in javascript using a technique called "JSONP" which involves creating a "script" element on-the-fly.

(You should also be aware that, when you use this latter approach, you are exposing your Google Translate API key within the page source, so users can potentially steal it.)

Edited to add: here's the example code from Google's API docs:

<div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
  function translateText(response) {
    document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
  }
</script>
<script>
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  var sourceText = escape(document.getElementById("sourceText").innerHTML);
  // WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
  // Restrict your key to designated domains or use a proxy to hide your key
  // to avoid misuage by other party.
  var source = 'https://www.googleapis.com/language/translate/v2?key=YOUR-API-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
  newScript.src = source;

  // When we add this script to the head, the request is sent off.
  document.getElementsByTagName('head')[0].appendChild(newScript);
</script>

Upvotes: 1

argentage
argentage

Reputation: 2778

You will want to use your favorite AJAX method (Mine being $.ajax in JQuery) to post to that url and then put the response into your text field.

http://api.jquery.com/jQuery.ajax/

Currently you're building a URL that, if visited, will have the answer you want - an AJAX request will programmatically visit that URL and get data back from it.

Upvotes: 0

Related Questions