Solved

Google Translate conflict with select menu navigation?

Posted on 2008-10-29
29
822 Views
Last Modified: 2013-12-25
I am trying to implement a simple Google Translate select menu on a site that makes use of several other select menus for navigational purposes. The initial translation (for the sake of clarity, let's use Spanish) from the menu in the upper right on the home page is always fine, but when I try to continue from the returned page in the translated language (specifically, linking to "413 Centro Civico de:" under the select menu "Commuter Express Rutas"  further down the page), different problems arise, depending on the browser:

In IE7, I get a Google Error: "Not Found The requested URL /comexp/routes/413/413.html was not found on this server." I notice that the usual query strings are missing from this URL.

In all other browsers I've tested, I arrive at the page, but it is no longer translated (though the Google frame indicates that it is) and is instead displayed in English.

Interestingly, links that are not in select menus  (for our purposes, from the translated Spanish page, click on "DASH pase mensual lugares de punto de venta" under the second orange-bar-heading in the right column) function as expected, returning the requested page in Spanish).

Call it jumping to conclusions, but it would seem something is conflicting between the two select menus...? Can anyone spot the problem and offer a solution?

Any help would be greatly appreciated.




<!-- CODE FOR GOOGLE TRANSLATE MENU -->
 

      <select name="translate" onchange="javascript:window.location = 'http://www.google.com/translate_c?hl=en&langpair=en%7C' + this.value + '&u=' + window.location.href;">

        <option value="">Translate This Page</option>

        <option value="ar">Arabic</option>

        <option value="zh-CN">Chinese Simplified</option>

        <option value="zh-TW">Chinese Traditional</option>

        <option value="nl">Dutch</option>

        <option value="fr">French</option>

        <option value="de">German</option>

        <option value="el">Greek</option>

        <option value="it">Italian</option>

        <option value="ja">Japanese</option>

        <option value="ko">Korean</option>

        <option value="pt">Portuguese</option>

        <option value="ru">Russian</option>

        <option value="es">Spanish</option>           

       </select>
 
 

<!-- CODE FOR NAVIGATION MENU -->
 
 

 <form action="../">

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
 

            <option value="#" selected>Commuter Express Routes</option>

            <option value="comexp/index.html">What Is Commuter Express?</option>

            <option value="javascript:void(null)">--------------------------</option>

            <option value="javascript:void(null)">TO DOWNTOWN:</option>

            <option value="javascript:void(null)">--------------------------</option>

            <option value="comexp/routes/409/409.html">409 to Civic Center from:</option>

            <option value="comexp/routes/409/409.html">Sylmar/Sunland/Tujunga</option>

            <option value="comexp/routes/409/409.html">Montrose/Glendale</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/413/413.html">413 to Civic Center from:</option>

            <option value="comexp/routes/413/413.html">Van Nuys/North Hollywood/</option>

            <option value="comexp/routes/413/413.html">Burbank</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/419/419.html">419 to Downtown from:</option>

            <option value="comexp/routes/419/419.html">Chatsworth/Northridge/</option>

            <option value="comexp/routes/419/419.html">Granada Hills/Mission Hills</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/422/422.html">422 to Downtown from:</option>

            <option value="comexp/routes/422/422.html">Central LA/Hollywood/</option>

            <option value="comexp/routes/422/422.html">San Fernando Valley/</option>

            <option value="comexp/routes/422/422.html">Agoura Hills/Thousand Oaks</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/423/423.html">423 to Downtown from:</option>

            <option value="comexp/routes/423/423.html">Newbury Park/Thousand</option>

            <option value="comexp/routes/423/423.html">Oaks/Woodland Hills/</option>

            <option value="comexp/routes/423/423.html">Encino</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/430/430.html">430 to Financial District</option>

            <option value="comexp/routes/430/430.html">from:</option>

            <option value="comexp/routes/430/430.html">Pacific Palisades/</option>

            <option value="comexp/routes/430/430.html">Brentwood/Westwood</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/431/431.html">431 to Financial District</option>

            <option value="comexp/routes/431/431.html">from:</option>

            <option value="comexp/routes/431/431.html">Westwood/Rancho Park</option>

            <option value="comexp/routes/431/431.html">Palms</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/437/437.html">437 to Financial District</option>

            <option value="comexp/routes/437/437.html">from:</option>

            <option value="comexp/routes/437/437.html">Venice/Marina del Rey</option>

            <option value="comexp/routes/437/437.html">Culver City</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/438/438.html">438 to Financial District</option>

            <option value="comexp/routes/438/438.html">from:</option>

            <option value="comexp/routes/438/438.html">Redondo Beach/</option>

            <option value="comexp/routes/438/438.html">Hermosa Beach/Manhattan</option>

            <option value="comexp/routes/438/438.html">Beach/El Segundo</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/448/448.html">448 to Financial District</option>

            <option value="comexp/routes/448/448.html">from:</option>

            <option value="comexp/routes/448/448.html">Rancho Palos Verdes/</option>

            <option value="comexp/routes/448/448.html">Torrance/Lomita/Wilmington</option>

            <option value="comexp/routes/448/448.html">Harbor City</option>

            <option value="javascript:void(null)">--------------------------</option>

            <option value="javascript:void(null)">TO OTHER CENTERS</option>

            <option value="javascript:void(null)">--------------------------</option>

            <option value="comexp/routes/142/142.html">142 between:</option>

            <option value="comexp/routes/142/142.html">San Pedro/Terminal Island</option>

            <option value="comexp/routes/142/142.html">Long Beach</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/534/534.html">534 between:</option>

            <option value="comexp/routes/534/534.html">Union Station/Downtown LA/</option>

            <option value="comexp/routes/534/534.html">Century City/Westwood/</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/549/549.html">549 to Pasadena from:</option>

            <option value="comexp/routes/549/549.html">Encino/North Hollywood/</option>

            <option value="comexp/routes/549/549.html">Burbank/Glendale/Pasadena</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/573/573.html">573 between:</option>

            <option value="comexp/routes/573/573.html">Mission Hills/Granada Hills/</option>

            <option value="comexp/routes/573/573.html">Encino/Westwood/</option>

            <option value="comexp/routes/573/573.html">Century City</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/574/574.html">574 between:</option>

            <option value="comexp/routes/574/574.html">Sylmar/Mission Hills/</option>

            <option value="comexp/routes/574/574.html">Granada Hills/Encino/</option>

            <option value="comexp/routes/574/574.html">Westchester/LAX/</option>

            <option value="comexp/routes/574/574.html">El Segundo</option>

            <option value="javascript:void(null)"></option>

            <option value="comexp/routes/575/575.html">575 between:</option>

            <option value="comexp/routes/575/575.html">Simi Valley/Warner Center</option>

          </select>

		  </form>

Open in new window

0
Comment
Question by:Klaytn
  • 16
  • 12
29 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22847377
The problem is the google translate interface.  It is very poorly designed, and doesn't retain any preferences, nor can you send it a specific link with parameters that work -- by design, or by dumbness?  You decide.  However, to overcome your problem you are better to use babelfish, which is what google copied for their own interface.  Babelfish has always been the best translating engine around --

http://babelfish.yahoo.com/

It already has its own drop down list.  Adapt that.  Or if you want to feed it a URL, you do this --

http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=http%3A%2F%2Fgoogle.com&lp=en_es&btnTrUrl=Translate

That works directly and returns you the site, already translated.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22848854
I doubt it has to do with google

It is more likely to do with

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">


which will open comexp/routes/413/413.html instead of



http://www.google.com/translate_c?hl=en&langpair=en%7C....&u=http://www.yoursite.com/comexp/routes/413/413.html'

 

so you need to change it to something like

 

<select onchange="window.open(location.href.substring(0,location.href.indexOf('comexp'))+this.options[this.selectedIndex].value,'_top')">

 

for example

Open in new window

0
 

Author Comment

by:Klaytn
ID: 22852023
Thanks very much for the suggestions.

scrathcyboy: I gave Babelfish a shot. Unfortunately, Babelfish - which I had initially considered but decided against because of the obtrusiveness of the badge - fails in the same manner.

mplungjan: I replaced my string with yours, and it also continues to revert back to English and back to my server rather than Google's. Should I have changed something in the code you posted for my purposes?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22852146
I did not test so you would have to look at what was generated if my script worked as expected
0
 

Author Comment

by:Klaytn
ID: 22852257
The URL that is returned is "http://updates.ladottransit.com/comexp/routes/413/413.html"

Is that what you mean?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22853748
So no google translate in the link???
0
 

Author Comment

by:Klaytn
ID: 22853842
No, which surprised me. I triple checked to make sure the new string was in place and sure enough the source reflected the change.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22857854
I would need to see this in (in-)action
0
 

Author Comment

by:Klaytn
ID: 22868674
Ha! No problem...

If  you go to:

http://updates.ladottransit.com/index.html

and follow the steps I describe in the initial post, you should be able to see what I mean.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22875802
So I choose crenshaw and I get
http://updates.ladottransit.com/dash/routes/crenshaw/crenshaw.html
which gives a 404 in any language
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22875825
Also you need to change the translate this page to index 0 onload since I cannot go back and choose the same language and changing to "translate this page" tries to translate to english
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22875904
Ok, the url of the frame after translation is for example

http://74.125.93.104/translate_c?hl=en&langpair=en%7Cnl&u=http://updates.ladottransit.com/index.html&usg=ALkJrhjgJC0udWlyMs3JI_RZn0K9KXOQZA

so we try this:


<script>

function changeLoc(sel) {

  var loc = sel.options[sel.selectedindex].value;

  if (loc.indexOf('javascript') ==0) return; // ignore the void options

  var frameLoc = location.href;

  if (frameLoc.indexOf('translate') ==-1) location = loc;

  var part1 = frameLoc.substring(0,frameLoc.indexOf('.ladottransit.com/'))+'.ladottransit.com/';

  var part2 = frameLoc.substring(frameLoc.indexOf('&usg'))

  location = part1 + loc + part2; // you want to STAY in the frame of google translate

//  window.open(part1 + loc + part2,"_top"); // you want to LEAVE the frame of google translate

 

}

</script>

 

<select onChange="changeLoc(this)">

Open in new window

0
 

Author Comment

by:Klaytn
ID: 22878457
Yeah, if you choose just anything on the page you'll find a lot of 404 errors, as I'm in the process of rebuilding. That's why in the initial post I pointed you to, I specify to use the link to Commuter Express 413, because that page is actually there.

Hm, I pasted your script into the head and changed the code on the select menus, and now the select menus no longer function at all. Did I miss something?

I didn't quite follow you on what to change the "Translate this Page" link to... index 0 onload

I appreciate the help - I'm in way over my head. I'm upping the point value of this one.

K
<head>

		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

		<meta name="language" content="en-US"> 

		<meta name="description" content="Maps, schedules, and complete rider information for LADOT Transit Services, including DASH, Commuter Express, Cityride and other services">

		<meta name="keywords" content="LADOT, Transit, Commuter, Express, DASH, Cityride, Schedule, route, map">

<title>LADOT Transit Services</title>

<!-- <script type="text/javascript" src="scripts/selectOption.js"></script> -->

<link href="ladot2.css" rel="stylesheet" media="screen">

<link href="print.css" rel="stylesheet" media="print">

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="../../../iefixes.css"/><![endif]-->

<script>

function changeLoc(sel) {

  var loc = sel.options[sel.selectedindex].value;

  if (loc.indexOf('javascript') ==0) return; // ignore the void options

  var frameLoc = location.href;

  if (frameLoc.indexOf('translate') ==-1) location = loc;

  var part1 = frameLoc.substring(0,frameLoc.indexOf('.ladottransit.com/'))+'.ladottransit.com/';

  var part2 = frameLoc.substring(frameLoc.indexOf('&usg'))

  location = part1 = loc + part2; // you want to STAY in the frame of google translate

//  window.open(part1 = loc + part2,"_top"); // you want to LEAVE the frame of google translate

 

}

</script>
 

</head>
 
 

<select onChange="changeLoc(this)">

  
 

            <option value="#" selected>Commuter Express Routes</option>

           

            <option value="comexp/routes/413/413.html">413 to Civic Center from:</option>

            <option value="comexp/routes/413/413.html">Van Nuys/North Hollywood/</option>

            <option value="comexp/routes/413/413.html">Burbank</option>

           

            </select>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22878916
typo

change
location = part1 = loc + part2;
to

location = part1 + loc + part2;
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22878927
When I choose a language and then click back, the select is still on the language so I need to change to "translate" which loads english to english translation (e.g. error)
0
 

Author Comment

by:Klaytn
ID: 22879185
Oof... Corrected the typo and the select menus still don't function.

Regarding the Translate this Page link:

Okay, I see... so to keep the back button from breaking, what exactly is the syntax I should change the select menu option link to?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22880326
can you look in the javascript console or change
location = part1 + loc + part2; // you want to STAY i
to
alert(part1 + loc + part2)

and/or upload the changes to a page I can see?
0
 

Author Comment

by:Klaytn
ID: 22880446
Okay, the above change is uploaded to:

http://updates.ladottransit.com/index.html

I presume this is for testing purposes and isn't supposed to be working yet, am I right?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22883324
I need to see it on your page since it is too complex to test otherwise. I'll look in a few hours when I get to a computer
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22883933
1. I had a typo

selectedindex should be selectedIndex
Sorry

2. you need to add somewhere to the end of the page or in an onLoad

document.getElementsByName("translate")[0].selectedIndex=0;

If you wrap your selects in a form you can do
document.forms[0].translate.selectedIndex=0;

assuming the translate dropdown is in the first form (0th form) on the page
0
 

Author Comment

by:Klaytn
ID: 22888160
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22892553
That is the alert we put in. That looks quite promising. I'll look in a few hours.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22892899
Please change

onLoad="document.getElementsByName("translate")[0].selectedIndex=0;"


to

onLoad="document.getElementsByName('translate')[0].selectedIndex=0;"

since the double quotes do not work inside double quotes
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22892907
The alert is showing something that seems correct

so change the alert from

alert(part1 + loc + part2);

back to

location = part1 + loc + part2;
0
 

Author Comment

by:Klaytn
ID: 22897867
Cool, this last change made it so I can translate the English page, go to the 413 page and it remains in Spanish. However, if I simply link from the select menus without translation, I get a 404 because it is looking for:

http://updates.ladottransit.com/comexp/routes/413/413.htmlhttp://updates.ladottransit.com/index.html

Somehow it's appending the URL to the home page onto the select menu links when there's no translation.

The other thing I noticed is that If I add this code now to 413.html, and link from there using the select menus, it once again reverts back to english. Do I need to do something different on the internal pages?
0
 

Author Comment

by:Klaytn
ID: 22933555
mplungjan, you're not givin up on me now are ya? I'm more broken than I was before!

I realize this one's been a bear to solve. I'm maxing out the points.

Appreciate the help so far!
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 22937954
I do not really get much out of points. If it seems I abandoned this, it could be due to me overlooking the last alert from this question in the sea of alerts I get

I have in the script
 if (frameLoc.indexOf('translate') ==-1) location = loc;


Please change to


 if (frameLoc.indexOf('translate') ==-1) {
  location = loc;
  return;
 }
0
 

Author Comment

by:Klaytn
ID: 23079486
Sorry for the delay on getting back to this - I was outta town.

That worked! Thank you!

Yikes, only one problem - I have other scripts running on the schedule pages that now don't work in translated mode (specifically, the script that calls the HTML containing the map and schedule information), and the behavior that supposed to kick in in the absence of JS isn't happening either, which renders the page useless. Any idea what might cause this?

I should probably open this up as a new question. This happens no matter where I translate from, even directly from translate.google.com.

Thanks again!
0
 

Author Closing Comment

by:Klaytn
ID: 31511473
Thanks a million, mplungjan.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now