• 0

Google Translate v2 using jQuery and Ajax

Asked by seb86,

 Share

Question

Rising Star

seb86

Posted
Posted 


<script type="text/javascript">
jQuery(document).ready(function($){
		jQuery('.description-en').keyup(function(){
				var value = jQuery(this).val();
				jQuery("div.original").text(value);
		});
		var apiKey = "ENTER-YOUR-API-KEY-HERE";
		var langSource = "en";
		jQuery('a.translate-de').click(function(){
				var langTarget = "de"; // The language Google will translate the text in.
				var description = jQuery("div.original").val(); // Fetch source of text to translate.
				var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=" + description + "";
				alert(apiurl); // This is just to see if all data is sent through
				// Now we call the data
				$.ajax({
						url: apiurl + encodeURIComponent(description),
						dataType: 'jsonp',
						success: function(data){
								// console.log(data);
								console.log(data.data.translations[0].translatedText);
								jQuery('.description-de').text(data); // Inserts translated text.
								jQuery('span.status').text('Translation Complete!'); // Updates the status of translation if successfull.
						}
				});
				return false;
		});
});
</script>
<textarea class="description-en" rows="5" cols="20"></textarea>
<div class="original">Your description is presented here.</div>
<a href="#" class="translate-de">Translate Description</a><br>
<textarea class="description-de" rows="5" cols="20">Translation is inserted here!</textarea>
<br>Status: <b><span class="status">No Translation</span></b>
[/CODE]

I'm in need of some help to get this working. I have a text-area field box to which I enter my text in English and then I have a link that when clicked it will translate it in German and enter the translation text in another text-area field below.

I am having trouble trying to get the value of the original text when sending it through and would like some feed back to tell me what is missing or wrong with the code.

Your feedback would be greatly appreciated and any one can you use this if they wish once it works.

P.S. 'div.original' will be hidden off screen once this function works so the user will not see what they are typing appearing below the text-area field.

9 answers to this question

Recommended Posts

  • 0
Rising Star

seb86

Posted
  • Author
Posted

Updated code: 17.12.2011 - 12:00am

I added the post method as I'm sure this is needed but the value of the description is still not fetched.


<script type="text/javascript">
jQuery(document).ready(function($){
		jQuery('.description-en').keyup(function(){
				var value = jQuery(this).val();
				jQuery("div.original").text(value);
		});
		var apiKey = "ENTER-YOUR-API-KEY-HERE";
		var langSource = "en";		jQuery('a.translate-de').click(function(){
				var langTarget = "de"; // The language Google will translate the text in.
				var description = jQuery("div.original").val(); // Fetch source of text to translate.
				var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=" + description + "";
				alert(apiurl); // This is just to see if all data is sent through
				// Now we call the data
				$.ajax({
						type: "GET",
						url: apiurl + encodeURIComponent(description),
						dataType: 'jsonp',
						beforeSend: function(){
								jQuery('span.status').text('Translating...'); // Updates the status of translation.
						},
						success: function(data){
								// console.log(data);
								console.log(data.data.translations[0].translatedText);
								jQuery('.description-de').text(data); // Inserts translated text.
								jQuery('span.status').text('Translation Complete!'); // Updates the status of translation if successfull.
						},
						error: function(data){
								jQuery('span.status').text('Translatiion Failed!'); // Updates the status of translation if failed.
						}
				});
				return false;
		});
});
</script>
[/CODE]

  • 0
Rising Star

seb86

Posted
  • Author
Posted

Made a few improvements but the text to translate is still not parsing through when link to translate text is clicked. Any help with the code would be very much appreciated.


<script type="text/javascript">
jQuery(document).ready(function($){
var apiKey = "ENTER-YOUR-API-KEY-HERE";
var langSource = "en";
jQuery('.description-en').keyup(function(){
  var value = jQuery(this).val();
  var toTranslate = jQuery(".description-en").val(); // Fetch source of text to translate.
  jQuery("div.original").text(value); // This is just to see that the script is working while I'm typing.
});
jQuery('a.translate-de').click(function(e){
  e.preventDefault;
  var langTarget = "de"; // The language Google will translate the text in.
  var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=";
  var text = toTranslate; // This inserts the text to translate.
  alert(text); // This tells me the text to translate came through.
  // Now we call the data
  $.ajax({
   type: "GET",
   url: apiurl + encodeURIComponent(text),
   dataType: 'json',
   beforeSend: function(){
	jQuery('span.status').text('Translating...'); // Updates the status of translation.
   },
   success: function(data){
	// console.log(data);
	console.log(data.data.translations[0].translatedText);
	jQuery('.description-de').text(data); // Inserts translated text.
	jQuery('span.status').text('Translation Complete!'); // Updates the status of translation if successfull.
   },
   error: function(data){
	jQuery('span.status').text('Translatiion Failed!'); // Updates the status of translation if failed.
   }
  });
  return false;
});
});
</script>
[/CODE]

  • 0
Rising Star

seb86

Posted
  • Author
Posted

I have the text to translate parsing through now. I just need to fetch the results and put it into the other textarea field. Any one able to help me with this would be of great help. Thank you.


<script type="text/javascript">
jQuery(document).ready(function($){
var apiKey = "ENTER-YOUR-API-KEY-HERE";
var langSource = "en";
jQuery('.description-en').keyup(function(){
  var value = jQuery(this).val();
  $toTranslate = jQuery(".description-en").val(); // Fetch source of text to translate.
  jQuery("div.original").text(value); // This is just to see that the script is working while I'm typing.
});
jQuery('a.translate-de').click(function(e){
  e.preventDefault;
  var langTarget = "de"; // The language Google will translate the text in.
  var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=";
  var text = $toTranslate; // This inserts the text to translate.
  var failed = 0;
  //alert(text); // This tells me the text to translate came through.
  // Now we call the data
  $.ajax({
   type: "GET",
   url: apiurl + encodeURIComponent(text),
   dataType: 'json',
   beforeSend: function(){
	if(failed == 1){
	 jQuery('span.status').text('Translating Again ...'); // Updates the status of translation.
	}
	else{
	 jQuery('span.status').text('Translating...'); // Updates the status of translation.
	}
   },
   success: function(data){
	// console.log(data);
	console.log(data.data.translations[0].translatedText);
	jQuery('.description-de').text(data); // Inserts translated text.
	jQuery('span.status').text('Translation Complete!'); // Updates the status of translation if successfull.
   },
   error: function(data){
	failed = 1;
	jQuery('.description-de').text($toTranslate); // Insert original text if failed.
	jQuery('span.status').text('Translation Failed!'); // Updates the status of translation if failed.
   }
  });
  return false;
});
});
</script>
[/CODE]

  • 0
Community Regular

Calculator

Posted
Posted

Something I noticed: you don't have to manually URL-encode and append all GET parameters to the request URL. jQuery will take care of them when you pass them as an object in the data attribute:

var apiurl = "https://www.googleapis.com/language/translate/v2";
// ...
$.ajax({
	type: "GET",
	data: {
	   key: apiKey,
	   source: langSource,
	   target: langTarget,
	   q: text
	},
	dataType: "json",
	// ...
});

Does this line:

console.log(data.data.translations[0].translatedText);

give you the desired output? If so, you can simply change the next line to:

jQuery('.description-de').text(data.data.translations[0].translatedText);

If not, try logging the whole data object and see if the object is structured as expected. Too many times already, I have found myself struggling with a bit of code when I was just looking at the wrong object attribute. :p

Another tip: enable the Net panel in Firebug (or whatever debugging console you use) and see what AJAX interactions are going on. You can investigate both sent and received data and try to find out where it may have gone wrong.

  • 0
Rising Star

seb86

Posted
  • Author
Posted
  On 17/12/2011 at 20:05, Calculator said:

Something I noticed: you don't have to manually URL-encode and append all GET parameters to the request URL. jQuery will take care of them when you pass them as an object in the data attribute:

var apiurl = "https://www.googleapis.com/language/translate/v2";
// ...
$.ajax({
	type: "GET",
	data: {
	   key: apiKey,
	   source: langSource,
	   target: langTarget,
	   q: text
	},
	dataType: "json",
	// ...
});

Does this line:

console.log(data.data.translations[0].translatedText);

give you the desired output? If so, you can simply change the next line to:

jQuery('.description-de').text(data.data.translations[0].translatedText);

If not, try logging the whole data object and see if the object is structured as expected. Too many times already, I have found myself struggling with a bit of code when I was just looking at the wrong object attribute. :p

Another tip: enable the Net panel in Firebug (or whatever debugging console you use) and see what AJAX interactions are going on. You can investigate both sent and received data and try to find out where it may have gone wrong.

I tried it your way and as much as it makes more sense it's still not working. I get a 200 OK report but still nothing returns and the response on firebug is empty.

Here is my latest code.


<script type="text/javascript">
jQuery(document).ready(function($){
var apiKey = "ENTER-YOUR-API-KEY-HERE";
var langSource = "en";
jQuery('.description-en').keyup(function(){
  var value = jQuery(this).val();
  $toTranslate = jQuery(".description-en").val(); // Fetch source of text to translate.
  jQuery("div.original").text(value); // This is just to see that the script is working while I'm typing.
});
jQuery('a.translate-de').click(function(e){
  e.preventDefault;
  var langTarget = "de"; // The language Google will translate the text in.
  var apiurl = "https://www.googleapis.com/language/translate/v2";
  var text = $toTranslate; // This inserts the text to translate.
  var failed = 0;
  // Now we call the data
  $.ajax({
   type: "GET",
   url: apiurl,
   data: { key: apiKey, source: langSource, target: langTarget, q: text },
   dataType: 'json',
   beforeSend: function(){
	if(failed == 1){
	 jQuery('span.status').text('Translating Again ...'); // Updates the status of translation.
	}
	else{
	 jQuery('span.status').text('Translating...'); // Updates the status of translation.
	}
   },
   success: function(data){
	// console.log(data);
	console.log(data.data.translations[0].translatedText);
	jQuery('.description-de').text(data.data.translations[0].translatedText); // Inserts translated text.
	jQuery('span.status').text('Translation Complete!'); // Updates the status of translation if successfull.
   },
   error: function(data){
	failed = 1;
	jQuery('.description-de').text($toTranslate); // Insert original text if failed.
	jQuery('span.status').text('Translation Failed!'); // Updates the status of translation if failed.
   }
  });
  return false;
});
});
</script>
[/CODE]

  • 0
Rising Star

seb86

Posted
  • Author
Posted

When testing in firebug, console log says undefined. I added console.log for error return.


<script type="text/javascript">
jQuery(document).ready(function($){
		var apiKey = "ENTER-YOUR-API-KEY-HERE";
		var langSource = "en";
		jQuery('.description-en').keyup(function(){
				var value = jQuery(this).val();
				$toTranslate = jQuery(".description-en").val(); // Fetch source of text to translate.
				jQuery("div.original").text(value); // This is just to see that the script is working while I'm typing.
		});
		jQuery('a.translate-de').click(function(e){
				e.preventDefault;
				var langTarget = "de"; // The language Google will translate the text in.
				var apiurl = "https://www.googleapis.com/language/translate/v2";
				var text = $toTranslate; // This inserts the text to translate.
				var failed = 0;
				// Now we call the data
				$.ajax({
						type: "GET",
						url: apiurl,
						data: { key: apiKey, source: langSource, target: langTarget, q: text },
						dataType: 'json',
						beforeSend: function(data){
								if(failed == 1){
										jQuery('span.status').text('Translating Again ...'); // Updates the status of translation.
								}
								else{
										jQuery('span.status').text('Translating...'); // Updates the status of translation.
								}
						},
						success: function(data){
								$fromTranslate = data.data.translations[0].translatedText;
								console.log($fromTranslate); // Reports result in debug.
								jQuery('.description-de').text(data.data.translations[0].translatedText); // Inserts translated text.
								jQuery('span.status').text('Translation Complete!'); // Updates the status of translation if successfull.
						},
						error: function(data){
								failed = 1;
								console.log(data.error.code); // Returns a 403 in debug.
								jQuery('.description-de').text($toTranslate); // Insert original text if failed.
								jQuery('span.status').text('Translation Failed!'); // Updates the status of translation if failed.
						}
				});
				return false;
		});
});
</script>
[/CODE]

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Intel LGA1700 14th Gen i5-14600K and 12th Gen 12600K are selling for great prices

      By OldGuru · Posted

      Great CPU
    • Report: Apple's new features for Messages and Phone apps revealed ahead of WWDC 2025

      By LiLmEgZ · Posted

      I use Messages on iPhone daily lol
    • 007 First Light's first trailer shows off an action-packed James Bond game

      By ThaCrip · Posted

      Main takeaway... overall impression is it's too generic, especially Bond. but in all honesty, I think that's sort of the way IOI's stuff generally is in recent memory at least. like even with their bread-and-butter game Hitman. besides the main character pretty much the rest of the characters in there are also too generic (nothing memorable at all as they are generally forgettable) etc. p.s. personally I suggest people give the leaked GoldenEye (I think originally intended for a XBA (XBox Live Arcade) release on XBox360) from 2021 (apparently it was built around 2007) a shot (on Xenia emulator on PC) as it's basically GoldenEye on N64 (the 1997 game that's always going to remain THE Bond game for many), feels exactly the same, but is graphics are updated a bit from N64 days and supports modern controllers out-of-the-box (but still looks/plays/feels like the old days). that was never officially released.
    • Apple watchOS 26 to likely work on following list of devices

      By Hamid Ganji · Posted

      Apple watchOS 26 to likely work on following list of devices by Hamid Ganji Apple's WWDC 2025 event is inching closer, where the iPhone maker is expected to reveal its latest software developments. This year's WWDC is focused on introducing a design overhaul to a wide range of Apple operating systems with a glass-like UI. The new UI overhaul takes most of its clues from visionOS, bringing a unified appearance to Apple devices. It has already been reported that Apple plans to change the name of its operating systems. So, we should expect to see watchOS 26 at the upcoming event, alongside iOS 26, iPadOS 26, and tvOS 26. The codename for Apple’s UI overhaul project is Solarium, which means a kind of glass that lights can go through. Here is the list of compatible Apple Watch models with watchOS 26: Apple Watch Series 6 Apple Watch Series 7 Apple Watch Series 8 Apple Watch Series 9 Apple Watch Series 10 Apple Watch SE (2nd generation) Apple Watch Ultra Apple Watch Ultra 2 Note that this is not Apple's official compatibility list, and the company might extend support to older Apple Watch models. However, given the previous records, the above models are more likely to get watchOS 26. Alongside these models, the Apple Watch Series 11, Apple Watch Ultra 3, and a new Apple Watch SE with plastic body will also receive watchOS 26 right off the bat. These models will drop in September next to the iPhone 17 series. While it was initially believed Apple would keep the upcoming UI overhaul to iPhones, iPads, and Mac devices, Bloomberg said the new UI also reaches watchOS and tvOS. However, the scope of changes on the watchOS are less likely to be significant. Yet little details exist about watchOS 26 and its features, but it's expected to support new watch faces and third-party shortcuts in the Control Center. Source: MacRumors
    • Here's how to watch Summer Game Fest 2025 showcase today and what to expect

      By Zeromus2003 · Posted

      Half Life 3 confirmed! /s

  • Recent Achievements

    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice

  • Popular Contributors

    1. 1
      +primortal
      445
    2. 2
      +FloatingFatMan
      245
    3. 3
      snowy owl
      241
    4. 4
      ATLien_0
      195
    5. 5
      Xenon
      140
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!