2017-06-18 162 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