2017-06-18 27 views
1

私はRails 5アプリケーションでjQueryエタログを適用しようとしています。Rails 5 JavaScriptパイプラインが動作しない

すべてのアセットファイルを 'app/assets'フォルダにコピーしました。私はhtmlヘッダーファイルからCSSとJavaScriptsリンクを削除しました。私の 'css'は正常に動作していましたが、JavaScriptは動作しませんでした。 JavaScriptは、私の 'html.erb'ファイルの本文セクションにリンクを追加した場合にのみ機能します。

私の 'html.erb' ファイルは以下の通りです: `

<!DOCTYPE html> 
<html> 
<head> 
<title>Pedal House | Single :: w3layouts</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
<!--webfont--> 
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'> 
<!--webfont--> 
<!-- dropdown --> 


<!--js--> 

</head> 
<body> 
<!--banner--> 

<script> 
    $(function() { 
     $("#slider").responsiveSlides({ 
     auto: false, 
     nav: true, 
     speed: 500, 
     namespace: "callbacks", 
     pager: true, 
     }); 
    }); 
    </script> 
<div class="banner-bg banner-sec"> 
     <div class="container"> 
      <div class="header"> 
        <div class="logo"> 
         <a href="index.html"><img src="assets/logo.png" alt=""/></a> 
        </div>        
        <div class="top-nav">          
         <label class="mobile_menu" for="mobile_menu"> 
         <span>Menu</span> 
         </label> 
         <input id="mobile_menu" type="checkbox"> 
         <ul class="nav"> 
          <li class="dropdown1"><a>BIKES</a> 
           <ul class="dropdown2"> 
            <li><a href="bicycles.html">NEW BIKES</a></li> 
            <li><a href="vpgco.html">VELOCE</a></li> 
            <li><a href="tgbm.html">TREK</a></li> 
            <li><a href="vpgco.html">PHOENIX</a></li> 
            <li><a href="tgbm.html">GIANT</a></li> 
            <li><a href="vpgco.html">GHOST</a></li> 
            <li><a href="tgbm.html">BINACHI</a></li> 
            <li><a href="vpgco.html">CORE</a></li> 
            <li><a href="tgbm.html">MUSTANG</a></li> 
            <li><a href="vpgco.html">OTHERS</a></li> 
           </ul> 
          </li> 
          <li class="dropdown1"><a href="kids%20item.html">KIDS ITEM</a> 

          </li> 
          <li class="dropdown1"><a href="parts.html">PARTS</a> 

         </li>  
         <li class="dropdown1"><a href="accessories.html">ACCESSORIES</a> 

         </li>    
         <li class="dropdown1"><a href="about.html">ABOUT US</a> 

         </li> 

         </ul> 

       </div> 
       <div class="clearfix"></div> 
      </div> 
     </div>     
</div> 
<!--/banner--> 
<div class="product"> 
    <div class="container"> 
     <div class="ctnt-bar cntnt"> 
      <div class="content-bar"> 
       <div class="single-page"> 
        <!--Include the Etalage files--> 

         <script src="assets/jquery.etalage.min.js"></script> 
       <script> 
      jQuery(document).ready(function($){ 

       $('#etalage').etalage({ 
        thumb_image_width: 400, 
        thumb_image_height: 400, 
        source_image_width: 800, 
        source_image_height: 1000, 
        show_hint: true, 
        click_callback: function(image_anchor, instance_id){ 
         alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")'); 
        } 
       }); 

      }); 
     </script> 
         <!--//details-product-slider--> 
        <div class="details-left-slider"> 
         <div class="grid images_3_of_2"> 
          <ul id="etalage"> 
          <li> 
           <a href="optionallink.html"> 
            <img class="etalage_thumb_image" src="assets/m1.jpg" class="img-responsive" /> 
            <img class="etalage_source_image" src="assets/m1.jpg" class="img-responsive" title="" /> 
           </a> 
          </li> 

         </ul> 
         </div> 
        </div> 
        <div class="details-left-info"> 
          <h3>SCOTT SPARK</h3> 

          <h4></h4> 
          <p><label>$</label> 300 </p> 

          <h5>Description ::</h5> 
          <p class="desc">The first mechanically-propelled, two-wheeled vehicle may have been built by Kirkpatrick MacMillan, a Scottish blacksmith, in 1839, although the claim is often disputed. He is also associated with the first recorded instance of a cycling traffic offense, when a Glasgow newspaper in 1842 reported an accident in which an anonymous "gentleman from Dumfries-shire... bestride a velocipede... of ingenious design" knocked over a little girl in Glasgow and was fined five 
          The word bicycle first appeared in English print in The Daily News in 1868, to describe "Bysicles and trysicles" on the "Champs Elysées and Bois de Boulogne.</p> 
        </div> 
        <div class="clearfix"></div>     
        </div> 
       </div> 
      </div> 

    </div> 
</div> 
<!----> 
<div class="footer"> 
    <div class="container wrap"> 
     <div class="logo2"> 
      <p class="copyright">2017 | Developed By <a href="https://www.facebook.com/shofi9x">Hussain</a> & <a href="https://www.facebook.com/ahmed.z.mahin">Zaman</a></p> 
     </div> 
     <div class="ftr-menu"> 
      <ul> 
       <li><a href="bicycles.html">BIKES</a></li> 
       <li><a href="kids%20item.html">KIDS ITEM</a></li> 
       <li><a href="parts.html">PARTS</a></li> 
       <li><a href="accessories.html">ACCESSORIES</a></li> 

      </ul> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<!----> 

</body> 
</html> 

My 'application.js' file:

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 
// vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. JavaScript code in this file should be added after the last require_* statement. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
//= require jquery 
//= require jquery_ujs 
//= require jquery.easydropdown 
//= require jquery.etalage.min 
//= require jquery.min 
//= require responsiveslides.min 
//= require rails-ujs 
//= require turbolinks 
//= require_tree . 

` 私はレールに新たなんだと、私はこの問題を解決するために多くの時間を費やしました。私は非常に多くの方法を試みましたが、どれも成功しません何人かの専門家のユーザーがこの問題を解決するのを助けてください。前もって感謝します。

答えて

0

Gemfileにgem 'jquery-rails', '~> 4.3', '>= 4.3.1'を追加しましたか? Rails 5では、jqueryはデフォルトでは提供されません。

+0

はい、私はまだ同じ問題を抱えていました – Shofi

関連する問題