jQuery, JSON-P and Google Translation : Various errors

▲
1
▼

I'm currently developping a GreaseMonkey user script to provide a direct translation of some form fields inside an Intranet App.

Everything goes OK until I call Google Translation API using this code :

var apiurl = 'https://ajax.googleapis.com/ajax/services/language/translate?v=1.0&langpair=fr%7Cen&q=';
$.getJSON(apiurl+encodeURIComponent(text)+"&callback=?",function(data){
    alert('Translation Complete');
    //Change text
});

Here are my problems :

  • I'm forced to use JSONP as this is a Cross-Domain request. In order to do that, I added the &callback=? string at the end of my URL. The getJSON callback isn't fired (but the response data is correct), and I get this error in the Firebug console :

jsonp1298988446807 is not defined

  • If I use a &callback=foo instead, FF doesn't seem to like it, as my request is no longer a POST one, it doesn't complete but it shows (in Network panel)

    OPTIONS request_url 405 Method Not Allowed

  • If I create a custom function to specify as callback, it doesn't work either as the function isn't called (it only contains an alert to check if it works).

If anyone has the slightest idea why this doesn't work, please help me, because i'm this close to banging my head on the wall (maybe it would help ^^).

Thanks.

EDIT : Thanks to Scoobler, I believed I've gone a little bit further. Using his code, i've managed to get something more than a /ignore from my script ^^

The request does not appear in the network tab of Firebug, and the responses given by the alerts are :

Response text: undefined

Status returned: error

Error thrown: Error thrown: [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///C:/Documents%20and%20Settings/username/Application%20Data/Mozilla/Firefox/Profiles/jmbr7ut9.default/extensions/%7Be4a8a97b-f2ed-450b-b12d-ee082ba24781%7D/components/greasemonkey.js :: anonymous :: line 396" data: no]

In the mean time, I kept researching on my own, and came across a jQuery/GreaseMonkey bridge for cross-domain requests, with a complete walkthrough here (from this post), but this shows the exact same error than Scoobler's script

jquery
jsonp
google-translate
asked on Stack Overflow Mar 1, 2011 by 3rgo • edited May 23, 2017 by Community

3 Answers

▲
2
▼

Maybe try this - it's a more verbose syntax to .ajax() but you don't have to encode the parameters yourself:

var apiurl = 'https://ajax.googleapis.com/ajax/services/language/translate';

var text = 'il fonctionne parfaitement';

$.ajax({
    url: apiurl,
    dataType: 'jsonp',
    data: {
        v: "1.0",
        langpair: "fr|en",
        q: text
    },
    success: function(data) {
        var translated = data.responseData.translatedText;
        alert('Translation Complete: ' + translated);
    }
});

See DEMO.

answered on Stack Overflow Mar 1, 2011 by rsp
▲
0
▼

I would try using the fully qualified .ajax() call instead of the short code .getJSON()

var apiurl = 'https://ajax.googleapis.com/ajax/services/language/translate?v=1.0&langpair=fr%7Cen&q=';
$.ajax({
    url: apiurl+encodeURIComponent(text),
    dataType: 'jsonp',
    success: function(data) {
        alert('Translation Complete');
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Response text: "+XMLHttpRequest.responseText);
        alert("Status returned: "+textStatus);
        alert("Error thrown: "+errorThrown);
    }
});

$.ajaxStart(function() {
    alert("Ajax Started");
});

$.ajaxStop(function() {
    alert("Ajax Finished");
});

jQuery will give a unique callback name like what you saw jsonp1298988446807, it will also define the function so you can use the normal .ajax() success/failure/complete callback hooks.

See an example here

There is another slightly more dynamic example: here (translating from English to French instead of the code above which does French to English)

answered on Stack Overflow Mar 1, 2011 by Scoobler • edited Mar 2, 2011 by Scoobler
▲
0
▼

In fact, there is a function in GreaseMonkey API, that allow Cross Domain request without any special parameters [mirror].

Using this made the script work instantly.

answered on Stack Overflow Mar 4, 2011 by 3rgo • edited Sep 12, 2014 by brasofilo

User contributions licensed under CC BY-SA 3.0