Conflict with prototype.js when using element.js to translating whole web

[haze...@gmail.com]

Google translate tool bar will not work if I  embed  "prototype.js " the page.     

    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

      

The url

https://translate-pa.googleapis.com/v1/supportedLanguages

will returns 403 error.

What should I do?Bellow works right only with out prototype.js.

              <div id="google_translate_element" style='padding-top:10px;'></div>
              <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
              <script type="text/javascript">
              function googleTranslateElementInit() {
              new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
              }
              </script>

[Efim (Cloud Platform Support)]

Please provide full API call request and responses to have a better understanding of the issue.

[haze...@gmail.com]

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

Google translate will not work ,it wont show tool bar if I embed prototype.js ( as the above line code ) in the page  .Coluld you try that ?

[haze...@gmail.com]

Google translate tool bar will not show if prototype.js is embedded in the page.

As the bellow picture 1, line 6 can't be added.Or the request url "https://translate-pa.googleapis.com/v1/supportedLanguages" will get a 403 error as picture 2. This requested url " supportedLanguages" should contains some parameters( "client=te&display_language=en-US&key=xxxxxx&callback=callback" ) as picture 3( which I deleted line 6 then it works right),but it didn't.

On Friday, January 7, 2022 at 8:17:14 AM UTC+8 Efim (Cloud Platform Support) wrote:

[Efim (Cloud Platform Support)]

Please try line 6 without the space in the src URL, like so.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

[haze...@gmail.com]

I have tried ,nothing to do with the space in the src url.

element.js  is just conflict with prototype.js

[Adrian Kiełbasa]

Hi,

I have the same problem. Maybe you already have a solution to this problem?

[Adrian Kiełbasa]

Hi,

I have the same problem. Maybe you already have a solution to this problem?

poniedziałek, 10 stycznia 2022 o 09:10:14 UTC+1 haze...@gmail.com napisał(a):

[Adrian Kiełbasa]

Can anyone answer?

[Adrian Kiełbasa]

[haze...@gmail.com]

No solution yet

[Adrian Kiełbasa]

Anyone from the support working on fixing for this problem?

[Mohammad Alam]

Hello OP,

I reproduced the issue on my environment, and I was also seeing the 403 error response after adding the prototypeJS script tags to my web page.

You are likely seeing the 403 error message due to the CORS policy. For security reasons, modern browsers (e.g chrome, Mozilla, etc) do not allow “cross-domains” requests, notably Ajax request due to this policy. CORS defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request.

Based on the information you have provided, I performed a bit of research for you, and found this StackOverflow answer to the CORS issue. From the post, you can set the HTTP header: "Access-Control-Allow-Origin" with value of "*" or "your client domain". You can either send this header from the Extensible Serviceable Proxy (ESP) which is part of the Google Cloud Endpoint, or you can send the HTTP header from your server side API script.

Hope this helps.

[haze...@gmail.com]

I don't think so.The url returns a 403 error is because the requested url  missing some parameters.

[Ben Fojas]

I've found that the incompatibility stems from prototype.js' override of the Array.from() method which is used by Google translate on initialization.  Google Translate passes from() an iterator map which the overridden method does not properly handle.  As a result, it is unable to send authentication parameters to the API and consequently, the 403.

One workaround is to modify the $A.from() method in prototype.js so that if it sees an iterator map, it will use Javascript's native from() method to return a result.

[haze...@gmail.com]

Awesome ,you got it.

When I comment the line " Array.from = $A;" from prototype.js,  google translation works just fine.