jQuery Translator

Came across googles ever handy Ajax translator API and I thought I’d write a quick jQuery plugin for it.

Summary

The plugin should be run on a form (for dynamic switching) or the document for static content
Automatic language detection (by leaving origin_language empty)
You can mix static content (even html blocks) with dynamic, so you can translate page content or form values, by simply switching the selector
Supports all languages available from google
When passing in languages they should use the standard 2 character short code.
After translation hooks
Download

Working Example

Using the plugin is straight forward enough. Once you have a form, like the one above, you need to load in the google language API, this plugin and on document ready call the translator plugin.

You should end up with something a bit like this:

<script src='http://www.google.com/jsapi'  type='text/javascript'></script>	
<script type='text/javascript'>                      
  google.load("language", "1");
</script>
<script src="http://github.com/charlesmarshall/jQuery-Translator/raw/master/jquery.translator.js" 
  type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
  jQuery('#translation_form').translator({
    "origin": '#translate',
    "origin_language": '#from_lang',
    "result": '#result',
    "result_language": '#to_lang'
  });
});
</script>

For a list of all supported languages have a look at googles languages enum

Plugin Events and Triggers

The plugin should be called on the parent form as it captures the form submit event and runs the translate. It also runs the a translation call on the following events:

Form submit
Pressing space or enter within the origin field
Changing either the source or result language (these should both be drop downs)

Language Sniffing

As part of the google API you can leave the origin language blank and it will try and figure it for itself. It’s very simple to do with this plugin, just don’t make a selector for it!

To do this, you just need to modify the call to translator to have an empty origin_language parameter:

jQuery('#auto_translation_form').translator({
  "origin": '#translate_from',
  "origin_language": '',
  "result": '#auto_result',
  "result_language": '#dest_lang'
});

The only issue that does sometimes come up is with using UTF-8 characters and how they are displayed in text areas and the like.

Translating Page Content With a Fixed Language

If you want to translate a static segment or an entire page, this plugin can do that also. Again, all you need to do is modify the call to translator plugin. Here is an example:

Hello, my name is Charles.

Here I change the selectors and manually pass in the language codes to translate between as such:

jQuery(document).translator({
  "origin": '#my_english_version',
  "origin_language": 'en',
  "result": '#my_french_result',
  "result_language": 'fr'
});

Translating Blocks of Markup

As the google API supports and preserves markup with the string that is passed along, it is pretty straight forward. In this example the outer containers contents is translated from English to Spanish and maintains all markup.

This is a paragraph that was in english, but should be translated to spanish.

This is a bullet point, within an unordered list
so is this

This paragraph has an a tag within it.

And it works in exactly the same way as the static selector with just one change:

jQuery(window).translator({
   "origin": '#preserve-markup',
   "origin_language": 'en',
   "result": '#preserve-markup',
   "result_language": 'es',
   "after_translate": track
 });

As you can see, the origin and the result parameters are the same selector, resulting in a replacement.

NOTE: I update the plugin to do this due to a request from Parthiban , hope this works for you!

Translating Page Content With a Selectable Language

You can also mix and match the two methods, having static content but swapping between languages like below:

Translation is the name of the game!

This is achieved very easily by switching the result_language parameter to a selector while keeping the origin_language as ‘en’

jQuery('#static_content_translation_form').translator({
  "origin": '#static_english_version',
  "origin_language": 'en',
  "result": '#dynamic_result',
  "result_language": '#trans_to'
});

Hooks

The plugin gives the ability to add a post hook on a successful translation. On this site for example I track (via google analytics page events) what is translated from each query.

In normal jQuery style you can pass in a function as a parameter to be run like this:

jQuery('#static_content_translation_form').translator({
  "origin": '#static_english_version',
  "origin_language": 'en',
  "result": '#dynamic_result',
  "result_language": '#trans_to',
  "after_translate": function(original, translation){alert('translated!');}
});

Both the original text and the translated text is passed in to the function.