2017-06-18 42 views
1

我想在我的Rails 5應用程序中應用jQuery etalage。Rails 5 JavaScript管道不工作

我將所有資產文件複製到'app/assets'文件夾。我從html頭文件中刪除了CSS和JavaScript鏈接,而我的'css'工作得很好,但JavaScript不起作用。只有在我的'html.erb'文件的正文部分添加鏈接時,JavaScript纔有效。

我 '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

您是否已將gem 'jquery-rails', '~> 4.3', '>= 4.3.1'添加到您的Gemfile中?在Rails 5中,jquery默認不會來。

+0

是的,我做了,但仍然是同樣的問題 – Shofi