JavaScript无法在Ruby on Rails中运行
[英]JavaScript not running in Ruby on Rails
问题描述
我目前在Rails的JavaScript上遇到问题。 我正在使用Rails版本4.1.8，并且有一个下拉菜单，我可以使用JavaScript在线控制它。 以前，我将所有js资产分别在app / config / initializers / assets中分别进行预编译，但我认为这并不是处理它的正确方法。 现在，当我运行rake asset：precompile时，我已经将所有js添加到了application.js中，但是奇怪的是，即使我将javascript_include_tag更改为application.js，单击文本和展开菜单的功能也无法使用。
我试图从以下位置使用JavaScript的视图代码：
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: Horizontal Drop-Down Menu</title>
<meta name="description" content="Blueprint: Horizontal Drop-Down Menu" />
<meta name="keywords" content="horizontal menu, microsoft menu, drop-down menu, mega menu, javascript, jquery, simple menu" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<%-#= stylesheet_link_tag 'component.css', :media => "all" -%>
<%-#= stylesheet_link_tag 'default.css', :media => "all" -%>
<%= stylesheet_link_tag 'application.css', :media => "all" %>
<!---<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>---->
<%-#= javascript_include_tag 'modernizr.custom.js' -%>
<%= javascript_include_tag 'application.js' %>
<!---</head>
<body>--->
<div class="container">
<header class="clearfix">
<span>Catch phrase is catchy...</span>
<a><%= link_to image_tag 'Western-Maryland_AHEC_logo.png', controller: "home"%></a>
<h1>Heading</h1>
<!---<nav>
<a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Blueprint">Previous Blueprint</a>
<a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="back to the Codrops article">back to the Codrops article</a>
</nav>--not working for now-->
</header>
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">About</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Views</h4>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Major Activities</a></li>
<li><a href="#">Strategic Action Plan</a></li>
</ul>
</div>
<div>
<h4>News</h4>
<ul>
<li><a href="#">Annual Reports</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
<div>
<h4>People</h4>
<ul>
<li><a href="#">Staff</a></li>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Caucuses</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Dental</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Meetings</a></li>
</ul>
<h4>Dietetic</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Minutes</a></li>
<li><a href="#">Nutrition Resources</a></li>
<li><a href="#">Area Registered Dietitians Directory</a></li>
<li><a href="#">Western Maryland Regional Medical Center Dietitians</a></li>
</ul>
</div>
<div>
<h4>Massage Therapy</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Minutes</a></li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">News and Events</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Services</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Resources</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
</div>
<div>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<!---<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/cbpHorizontalMenu.min.js"></script>---->
<%= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' %>
<%-#= javascript_include_tag 'cbpHorizontalMenu.min.js' -%>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
</head>
<body>
<%= link_to root_url do %>
<%= image_tag 'Western-Maryland_AHEC_logo.png'%> <!--, width: 136, height: 67, alt: 'Western Maryland Area Health Education Center'%> -->
<% end %>
</body>
</html>
我预编译的application.js中的JavaScript如下所示：
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };
我觉得这是一个愚蠢的问题，但是当我分别预编译这些资产时为什么会起作用，但是当我尝试使用application.js引用它们时却无法起作用，我完全迷失了
任何帮助将不胜感激，谢谢！
1 个解决方案
解决方案1
0 2015-05-10 06:34:31
在我看来，您可以尝试按application.js文件的最高顺序添加所需的jquery文件。 之后所有的订单。 因此它可以提供帮助。
Google Directions服务未使用JavaScript在Rails中运行
[英]Google direction service not running in ruby on rails using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Ruby on Rails运行JavaScript代码
Google Directions服务未使用JavaScript在Rails中运行
在 Rails 上的 Ruby 上注入 ruby 和 javascript
在rails上使用Javascript在Ruby上
在Ruby on Rails中集成Javascript
Ruby on Rails上的简单JavaScript
使用Ruby on Rails分割javascript
ruby数组到javascript - Rails
在Ruby on Rails中使用Javascript
Ruby on Rails和Javascript
相关标签