jQuery, JSON-P and Google Translation : Various errors

Question

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

score 2 · Answer 1 · answered Mar 01 '11 at 15:18

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.

Scoobler · Answer 2 · 2011-03-02T08:47:11.803

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)

edited Mar 02 '11 at 08:47

answered Mar 01 '11 at 15:05

Scoobler

9,696
4
36
51

Your idea is correct I think, but the request won't start. I'll check my code for errors – 3rgo Mar 01 '11 at 15:24
@Squ36 if you had copied and pasted the code from above, there was a missing `}` at the end of the success callback - sorry about that! I have also included the error callback which might help shed some light if its not working. The two extras `.ajaxStart()` and `.ajaxStop()` should alert you when any `.ajax()` function starts and stops. – Scoobler Mar 02 '11 at 08:50
I tried your code, it should work, but it doesn't... I'll update my OP to show the errors. – 3rgo Mar 02 '11 at 09:54

score 0 · Accepted Answer · edited Sep 12 '14 at 17:03

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.

edited Sep 12 '14 at 17:03

brasofilo

25,496
15
91
179

answered Mar 04 '11 at 08:58

3rgo

3,115
7
31
44

jQuery, JSON-P and Google Translation : Various errors

3 Answers3