2016-06-12 6 views
1

私はレールアプリを持っていますhttps://hr4d.herokuapp.com新しいページにアクセスするとページが正しく読み込まれないため、JQueryが無効になるという問題があります。あなたはサイトにアクセスして、私が何を意味するのか見ることができます。ここに私のjQueryのです:訪問時にページをリロードする方法

<div class="navbar"> 

    <div class="box first"> 
     <a href="/pages/home" class="link-disabled">HR4D</a> 
    </div> 

    <div class="box second"> 
     <span class="tagline">Define, Develop, Deliver, and Differentiate</span> 
     <br> 

     <a class="link" href="/pages/home"> 
     Home 
     </a> 

     <a class="left link" id="services" href="/pages/services"> 
     Services 
     </a> 
     <div class="caret" id="caret"></div> 

     <a class="left link" href="/pages/contact"> 
     Contact Us 
     </a> 

     <a class="left link" href="/pages/about"> 
     About 
     </a> 

    </div> 

</div> 

ないこの問題を解決する方法がわから:

$('document').ready(function() { 

    $('.dropdown-services').hide(000); 

    $('#caret').click(function() { 

     if($('.dropdown-services').is(":visible")) { 
      $('.dropdown-services').slideUp(300); 
     } 
     else { 
      $('.dropdown-services').slideDown(300); 
     } 
    }); 

}); 

ここに私のナビゲーションバーのコードがあります。どんな助けもありがとうございます。

答えて

1

問題は主にTurbolinksによって発生します。私が頻繁に取り組んできた1つの方法は、ターボリンクを完全に無効にするか、コードの特定の部分で無効にすることです。 グローバルに無効にするには、app/assets/javascripts/application.jsでターボリンクが必要な行を削除できます。

+0

はい、うまくいきました。どうもありがとうございました! –

0

実際の問題は再読み込みではなく、ページが最初から正しく読み込まれないようにする問題を解決しています。

あなたのapp/assets/javascripts/application.jsファイルから次の行を削除する必要があります。

//= require turbolinks 

問題を修正する可能性が非常に高いです。ただし、アプリケーションでTurboLinkを引き続き使用することをお勧めします。その場合は、ページが動的に更新されたときに起動される個別のTurboLinksイベントを処理する必要があります。これらのイベントは「ページ:負荷」と「ページ:復元」であり、jQuery(document).readyコールバックと同じ方法で処理する必要があります。これを行うには、次の式を使用できます。あなたのHTMLで

は、あなたの現在のJavascript readyハンドラからコードをロードするスクリプトが含まれます: onThisPageReady機能は、あなたが構築しているページのJavaScriptソースに属し

<body> 
    <!-- important body stuff --> 
    <script> 
    jQuery(document).ready(onThisPageReady); 
    jQuery(document).on('page:load', onThisPageReady); 
    jQuery(document).on('page:restore', onThisPageReady); 
    </script> 
</body> 

場合、またはapp/assets/javascripts/application.jsですべてのページに適用されます。単純にこれは適切なJavaScriptアセットファイルに含まれます:

function onThisPageReady() { 
    $('.dropdown-services').hide(000); 

    $('#caret').click(function() { 
     if($('.dropdown-services').is(":visible")) { 
      $('.dropdown-services').slideUp(300); 
     } 
     else { 
      $('.dropdown-services').slideDown(300); 
     } 
    }); 
}); 

あなたがTurboLinksを使用して動的初期化作業を行った、ことをやったら。 TurboLinks Eventsの完全なリストは、TurboLinks Classic github projectにあります。現在Rails 5アプリを構築している場合、TurboLinksのバージョンは,であり、登録するイベントは全く異なります。TurboLinks 5 Full List of Eventsにあります。

関連する問題