• 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

    • dBpoweramp Music Converter 2025-06-05 by Razvan Serea Audio conversion perfected, effortlessly convert between formats. dBpoweramp contains a multitude of audio tools in one: CD Ripper, Music Converter, Batch Converter, ID Tag Editor and Windows audio shell enhancements. Preloaded with essential codecs (mp3, wave, FLAC, m4a, Apple Lossless, AIFF), additional codecs can be installed from [Codec Central], as well as Utility Codecs which perform actions on audio files. After 21 days the trial will end, reverting to dBpoweramp Free edition (learn the difference between Reference and dBpoweramp Free, here). dBpoweramp is compatible with Windows 10, 8, 7, Vista, both 32 and 64 bit. dBpoweramp Music Converter features: Convert audio files with elegant simplicity. mp3, mp4, m4a (iTunes / iPod), Windows Media Audio (WMA), Ogg Vorbis, AAC, Monkeys Audio, FLAC, Apple Lossless (ALAC) to name a few! Multi CPU Encoding Support Rip digitally record audio CDs (with CD Ripper) Batch Convert large numbers of files with 1 click Windows Integration popup info tips, audio properties, columns, edit ID-Tags DSP Effects such as Volume Normalize, or Graphic EQ [Power Pack Option] Command Line Encoding: invoke the encoder from the command line DSP Effects - process the audio with Volume Normalize, or Sample / Bit Rate Conversion, with over 30 effects dBpoweramp is a fully featured mp3 Converter dBpoweramp integrates into Windows Explorer, an mp3 converter that is as simple as right clicking on the source file >> Convert To. Popup info tips, Edit ID-Tags are all provided. dBpoweramp Music Converter 2025.06.05 changelog: Darkmode added Core Converter Debug log dumps ID Tags written VST Effect Folders dialog fixed missing InitCommonControls would not show correctly FLAC/Ogg/Opus/etc - allows editing of CDTOC ID Tag CD Ripper secure ripping log where shows TOC was not showing CD Extra correctly CD Ripper was incorrectly setting data track length on main display (for certain drives) CD Ripper internally better handling of corrupt TOCs CD TOC to Tag was incorrectly adding 150 to CD Extra disc CD Ripper shows "AccurateRip Unconfigured" in rip status rather than "not in accuraterip" if unconfigured CD Ripper art paste accepts https CueSheet added as standard - log file written to same folder as cue and folder.jpg AIFF internal code merge (macos >> windows) Download: dBpoweramp Music Converter R2025.06.05 | 82.2 MB (Shareware) View: dBpowerAMP Music Converter Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Staged. It's a requirement that vehicles are strapped down to the bed. Usually wheel and/or chassis tie downs are used. That appears to just be on the winch.
    • I feel Apple's big problem is the lack of big data to train any AI LLM model. They have statistics on usage, but they don't have the written social media, messaging (they were early adopters of end-to-end encryption), they didn't scrape the Internet before the book companies and new sources were wise. So they have no choice but to use a third party LLM provider. Which ties them in knots with their own stance on security and privacy. In short, they are royally stuffed when it comes to developing an in-house AI.
    • Nothing is black and white. Democracy can suck, just as communism can. The risk is people who blindly think one is vastly superior over the other. Democracy needs a lot to make it work well, and there are many examples around the world of it. Good education, mandatory voting, accessible voting, and removing money from politics are just a few elements that need to be sorted for a functional democracy. The USA is the playbook on what not to do with democracy.
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      255
    3. 3
      +FloatingFatMan
      252
    4. 4
      ATLien_0
      226
    5. 5
      +Edouard
      189
  • Tell a friend

    Love Neowin? Tell a friend!