Rails TurbolinksでGoogle Translate Javascriptウィジェットを使用するにはどうすればよいですか？

Question

初めてGoogle Translateウィジェットが正常に読み込まれますが、新しいページに移動すると、Turbolinksは本文を削除して置き換えます。これにより、ウィジェットが消えます。

%head 
    /Google Translate 
    :javascript 
     function googleTranslateElementInit() { // also called from application.coffee 
     new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en,es,fr,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); 
     } 
    %script{type: "text/javascript", src: "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"} 

は、私は、ページの読み込み

$(document).on 'turbolinks:load', -> 
    googleTranslateElementInit() 

時に関数を呼び出すことを試みた。しかし、それは私が永久的な要素をマークしようとした

Uncaught TypeError: Cannot read property 'InlineLayout' of undefined 
    at googleTranslateElementInit (VM145012 dashboard:101) 
    at HTMLDocument.<anonymous> (application.self-fc93480f6ec8a603a6b9a1d0d9d34ab41a68ef8e4e2a52c661eb84e2b92c170c.js?body=1:7) 
    at HTMLDocument.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227) 
    at HTMLDocument.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879) 
    at Object.t.dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6) 
    at r.t.Controller.r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6) 
    at r.t.Controller.r.pageLoaded (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6) 
    at turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6 

ブラウザコンソールで例外がスローされます

https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads

%body 
    ... 
    #google_translate_element{'data-turbolinks-permanent'=>true} 

しかし、それは私がこの方法を見つけたが、それは非常にhackeyだ私は新しいページに移動したときに、このスタックトレースを与え、それに

element_main.js:419 Uncaught TypeError: Cannot read property 'focus' of null 
    at ou.u.Ke (element_main.js:419) 
    at Lh (element_main.js:78) 
    at HTMLDivElement.Gh (element_main.js:80) 
    at HTMLDivElement.<anonymous> (element_main.js:76) 

Answer 1

をクリックします。

application.coffee

$(document).on 'turbolinks:load', -> 
    $('#google_translate_element').empty() 
    # googleTranslateElementInit() 

application.haml

%head 
    /Google Translate 
    :javascript 
     function googleTranslateElementInit() { 
     new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en,es,fr,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); 
     } 
    %body 
    ... 
      #google_translate_element 
    ... 
    = yield 
    ... 
    %script{type: "text/javascript", src: "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"} 

どうやらそれは、スクリプトタグからコールバックされずに動作しません。コールバックを手動で呼び出すことはできず、スクリプトを一度だけロードすることはできません。もしあなたが.empty()のタグを持っていなければ、あなたの履歴に戻って、さらに多くのGoogle翻訳ウィジェットを追加し続けるでしょう。