CODEWITHSUNDEEP
javascriptjqueryapigoogle-translate
Peter
Peter

Reputation: 804

google translate api translate page using js

I would like to change the page language using js I am using google translator.

Drop down value is changing using my code but I think we need to trigger any ajax so it will get translated. Please suggest any solutions

I am trying this code but it is not working.

$('.goog-te-combo').val('ur').trigger('change');
$('.goog-te-combo').find('select').trigger('change');

Here is my code 

<!DOCTYPE html>
<html>
 <head>

  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: '/en/ur'}, 'google_translate_element');
  }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</head>
<body>

<p>You can translate the content of this page by selecting a language in the select box.</p>


<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>




<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind('load', function()
{
    $('.goog-te-combo').val('ur');

});
</script>
</body>
</html>

Upvotes: 1

Views: 18778

Answers (1)

Atybzz
Atybzz

Reputation: 327

From the code you provided, it seems you never made an API call requesting for some text to be translated. The following documentation has detailed instructions on the query format needed for an API call. You will need to specify which part of the webpage you need to translate in the query. The translated strings will be returned in an array following the same order they were passed. Here is a sample code based on what you provided:

<body>
    <p id="textField">You can translate the content of this page by selecting a language in the select box.</p>
    <h1 id="title">My Web Page</h1>
    <p>Hello everybody!</p>
    <p>Translate this page:</p>
    <form>
        <select id="targetLanguage">
            <option value="ZH">Chinese (Mandarin)</option>
            <option value="CS">Czech</option>
            <option value="DA">Danish</option>
            <option value="NL">Dutch</option>
            <option value="EN">English</option>
            <option value="ET">Estonian</option>
            <option value="FR" selected = "selected">French</option>
        </select>

        <input type="button" id="translateButton" value="Translate" />
    </form>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#translateButton").click(function () {

            var url = "https://translation.googleapis.com/language/translate/v2";
            //Strings requiring translation
            url += "?q=" + escape($("#textField").text());
            url += "&q=" + escape($("#title").text());
            //Target language
            url += "&target=" + $("#targetLanguage").val();
            //Replace with your API key
            url += "&key=YOUR_API_KEY";
            $.get(url, function (data, status) {
                //Results are returned in an array following the order they were passed. 
                $("#textField").text(data.data.translations[0].translatedText);
                $("#title").text(data.data.translations[1].translatedText);
            });       
        });
    </script>  
</body>

You can add more target languages by including them in the drop down menu. Here is the complete list of supported languages and their code.

Upvotes: 2

Related Questions