JQuery Mobile with Ruby on Railsレイアウトが破棄され、リロードでのみ修正されます

Question

jQueryとRuby on Railsでウェブサイトを作成しました。 最初のページを読み込むとうまく見えますが、リンクをクリックすると、レイアウトは2ページ目で破棄されます。

Ajaxを無効にした場合： 2番目のページのレイアウトはJQuery Mobileを使用していないようです。

Ajaxがアクティブ化されている場合： 2ページ目のレイアウトも破棄されます。しかし、それはまだJQueryのモバイル要素を持っています。 2ページ目を再ロードするだけで、通常のレイアウトが表示されます。 Image of destroyed vs normal layout

マイアプリ/資産/ JavaScriptの/ application.jsは次のようになります。index.html.etbで

//= require jquery 
//= require jquery_ujs 
//= require jquery.mobile 
//= require turbolinks 
//= require_tree 

私のリンクは次のようになります。<a href="<%=url_for welcome_user_path %>"data-role="button" data-ajax="true">Login</a>

マイuser.html.erbは次のようになります。

<div data-role="page" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1099px;"> 
    <div data-role="header" class="ui-header ui-bar-a" role="banner"> 
     <h1 class="ui-title" role="heading" aria-level="1">Benutzer</h1> 
    </div><!-- /header --> 
    <div data-role="content" class="ui-content" role="main"> 
     <div data-role="tabs" id="tabs"> 
      <div data-role="navbar"> 
       <ul> 
        <li> 
         <a href="#one" data-theme="a" data-ajax="false" class="ui-btn-active"> <img src="/assets/cocktails/Nekromane.png" style="width:100px;"> <h1>Nekromane</h1></a> 
        </li> 
       </ul> 
      </div><!-- /navabar --> 
     </div><!-- /tabs --> 
    </div><!-- /content --> 
</div><!-- /page --> 

Answer 1

私はStackOverflowの上でかなり長い間探した後に答えが見つかりました： https://stackoverflow.com/a/17924845/6225473

はGemfileにこれを追加します。

：あなたの資産/ JavaScriptの/ application.jsファイルへ

gem 'jquery-turbolinks' 

、これを

//= require jquery.turbolinks 

と削除

//= require turbolinks 

とすべてのリンクを使用してください。

data-ajax="false"