AJAX Language API

[NicholasCanzoneri]

Hello all,

(Just a little background) I'm trying to implement the Google
translation services for a metropolitan planning organization that I
work for (www.dvrpc.org). The (somewhat) difficult part of this is
trying to accommodate our existing page structure.

What I'm Doing:

What I'm trying to do is (using some jQuery) to pick out the
paragraphs innerHTML (<p> tags) on our site and translate that content
into a selected language. Because of the character limit, I'm using a
combination of substring and breaking up the text by period, semi-
colon or comma for semantic reasons. So, each request is of a
different size (and usually the last request is the smallest).

Once I get the result.translation I'm adding that to the innerText of
the <p> element that I translated.

The Problem:
Because each request for translation is a different size, the smaller
ones finish first, and thus go into my <p> element first. The
paragraph gets chopped up and thus makes no sense. NOTE: It works fine
in Firefox 2.0, I only notice this in IE 6. (Haven't tested in FF 3.0
or IE 7).

So, it is probably something wrong in my design, but I can't wrap my
head around it. Baring that, is there a way to wait for the result
from google.language.translate (I know it defeats the purpose of
AJAX).

Here is the url: http://www.dvrpc.org/asp/test/googletranslate/mission2.htm

Thanks for reading and any help you are able to provide,

Nicholas Canzoneri

[jgeerdes [AJAX APIs "Guru"]]

Without spending too much time to dig through the whole concept, since
the translations are made asynchronously, you'll have to do one of two
things: find a way to associate individual requests' original/
translation pairs and a span from which they came. Alternately, and
likely easier, you could convert the whole thing to run in serial
(i.e., one translation AFTER another, rather than all simultaneously.
To do this, you would want to include logic in your callback which
would check to see if your current substring was the last in the
overall block to be translated. If it's not, then you would want to
execute another translation. The downside here is that it could take
a bit longer to process the whole thing, as you'll be doing the
various bits and pices one after another instead of at the same time.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a poroject quote:
http://jgeerdes.home.mchsi.com
jgee...@mchsi.com

If you're in the Des Moines, IA, area, check out Debra Heights
Welseyan Church!

[Ben Lisbakken]

Nicholas --

I agree with Jeremy's options -- either find a way to keep track of which request is which, or do one request, wait for response, then the next, etc.  Doing the requests synchronously is going to be pretty painfully slow, so I wrote up some quick code to convey how to do the first option.

If you aren't familiar with it, the technique I'm using is called closure.  Do some searches for closure and you can learn more about it, but here's my description for this case:
When using a callback function, if you pass it a parameter, that parameter won't be sent into the function until the function runs.  In this situation, the function runs when the AJAX request returns.  So if you did a for loop, passing i into the callbacks, those callbacks would use the value of i at the time their requests return.  This will end up causing all callbacks to be passed the same value of i, since the for loop will finish before any of the requests will return.

So what you do is use closure.  Closure is just when you have a function return another function.  What we do is we set the callback to be our closure function, and we pass in i.  Inside of this function, we do return function(results){} which is the actual function we want to run.  By passing in i to the outer function, it takes a snapshot of i so that we get it at the moment that we want it.

Anyways, here is the code that I wrote.  It does 20 translations, waits until they are all finished, then prints them in order.  One thing to be very careful and aware of is timeouts.  I just wrote up some quick code, and I didn't do any failed request handling.  The way my sample code works is it waits for all 20 requests to be done, when they are it prints.  If one of them fails, it will never print.  If you are doing a lot of requests simultaneously, some _will_ fail.  I'd suggest looking up how to handle failed requests (JQuery does it nicely), or put your own timer in the code so that if 1-2 seconds has gone by, retry a request.

Anyways, the gist of what you are trying to do is there, and it's nice because all of the requests run at once, instead of synchronously.

Here's the code (http://paste-it.net/public/qb41c9a/)

-Ben

[NicholasCanzoneri]

Thank you very much for the detailed replies Ben and Jeremey!

I'll post back in the next few days when I get a version working!

-- Nicholas Canzoneri

> jgeer...@mchsi.com> wrote:
>
> > Without spending too much time to dig through the whole concept, since
> > the translations are made asynchronously, you'll have to do one of two
> > things:  find a way to associate individual requests' original/
> > translation pairs and a span from which they came.  Alternately, and
> > likely easier, you could convert the whole thing to run in serial
> > (i.e., one translation AFTER another, rather than all simultaneously.
> > To do this, you would want to include logic in your callback which
> > would check to see if your current substring was the last in the
> > overall block to be translated.  If it's not, then you would want to
> > execute another translation.  The downside here is that it could take
> > a bit longer to process the whole thing, as you'll be doing the
> > various bits and pices one after another instead of at the same time.
>
> > Jeremy R. Geerdes
> > Effective website design & development
> > Des Moines, IA
>
> > For more information or a poroject quote:
> >http://jgeerdes.home.mchsi.com

> > jgeer...@mchsi.com

[NicholasCanzoneri]

Just wanted to say I got it working! The closure technique (and not
messing up jQuery) solved my problem. Thanks for all the help, it is
very encouraging to have detailed and quick replies!

Here is the semi-finished solution. http://www.dvrpc.org/asp/Test/googletranslate/mission2.htm

It translates all the <p> tags (with the "text" class) in the main
body.

Thanks again Ben and Jeremy

Nicholas Canzoneri