• 0

Google Translate v2 using jQuery and Ajax


Question


<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

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

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

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

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
  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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • At least Starship Block 2 is consistent in failure.  They were lucky it was not the stack. That would have been really huge. 
    • VR is dead on the PS at this rate, sales just aren't there. Way more VR push on the PC, even Sony knows this and that's why they added PC support to the PSVR.
    • Borderlands series, Rematch, Broken Arrow, and more get Nvidia GeForce NOW support by Pulasthi Ariyasinghe Another Nvidia GeForce NOW games update has arrived, meaning subscribers now have even more games to jump into via the cloud if they own a copy. The latest wave touts 13 more games, and that includes the Borderlands franchise from Gearbox, Remedy's brand-new cooperative shooter FBC: Firebreak, and more. With the fourth entry now on the way, for those who have yet to jump into Gearbox's wacky looter shooter universe, Borderlands, Borderlands 2, Borderlands 3, and even Borderlands: The Pre-Sequel are now a part of GeForce NOW. The Sifu developer's rule-less soccer experience, Rematch, has also been released to standard edition owners today. With the latest update, for owners of the game or PC Game Pass subscribers, it is also accessible via the cloud on GeForce NOW. Here are the games announced for the program this week: REMATCH (New release on Steam, Xbox, available on PC Game Pass, June 16) Broken Arrow (New release on Steam, June 19) Crime Simulator (New release on Steam, June 17) Date Everything! (New release on Steam, June 17) FBC: Firebreak (New release on Steam, Xbox, available on PC Game Pass, June 17) Lost in Random: The Eternal Die (New release on Steam, Xbox, available on PC Game Pass, June 17) Architect Life: A House Design Simulator (New release on Steam, June 19) Borderlands Game of the Year Enhanced (Steam) Borderlands 2 (Steam, Epic Games Store) Borderlands 3 (Steam, Epic Games Store) Borderlands: The Pre-Sequel (Steam, Epic Games Store) METAL EDEN Demo (Steam) Torque Drift 2 (Epic Games Store) As always though, keep in mind that unlike subscription services like Game Pass, a copy of a game must be owned by the GeForce NOW member (or at least have a license via PC Game Pass) to start playing via Nvidia's cloud servers.
    • WHAT? First of all, Azure, literally, runs on THE LINUX KERNEL. I know, right? Windows is easier to develop drivers? This must be the joke of the century! Developing drivers on Linux, you can interact with low level implementation straight to the core. You can build and test them with standard tools like GCC and Make, no need for a full blown IDE or SDKs, only a kernel header and a Makefile. You can load/unload drivers dynamically, without rebooting, which makes debugging MUCH easier. You don't need to sign drivers, unlike Windows, even for local testing. And a ton of other conveniences. "There is no way a Linux distribution can compete against Windows". Literally, SteamOS competes against Windows on handhelds, playing games WRITTEN for Windows, BETTER than Windows. "DirectX is the most powerful API"? Really? Vulkan provides more low level control, less overhead, scales better with more threads, it's cross platform and extensible. How, exactly, is "DirectX the most powerful API"?
    • It's easier for the console market to pull in more revenue when they're prices are higher compared to the PC where games often come out cheaper than their console versions or go on sale quicker. Having said that, I'm not going to be paying $70 or $80 for a game, regardless of the platform it's on. Revenue aside, because raising prices on consoles skew things when the prices on the PC often stay around the same levels, it's been shown that the PC market is growing while the console market is overall flat. PC will pass consoles soon dropping them into 3rd place. And the PS5 being on track to pass the PS4 doesn't say much, if the console market was actually still growing Sony would've passed the PS2 as it's best selling console with the PS3, and the PS4 would've outsold both and so on. That's not happening. It took Nintendo to release a totally different hybrid system with the Switch to inject some new life into the "console" market. Even then it's pushed as a handheld first and the majority who buy it do so because it's portable and at a good price.
  • Recent Achievements

    • First Post
      MikeK13 earned a badge
      First Post
    • One Month Later
      OHI Accounting earned a badge
      One Month Later
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
    • First Post
      Thornskade earned a badge
      First Post
    • Week One Done
      Higante88 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      716
    2. 2
      ATLien_0
      273
    3. 3
      Michael Scrip
      203
    4. 4
      +FloatingFatMan
      182
    5. 5
      Steven P.
      128
  • Tell a friend

    Love Neowin? Tell a friend!