【发布时间】：2016-04-25 22:04:19
【问题描述】：
我在将 javascript 添加到我的 rails 应用程序时遇到问题。我已将 javascript 直接添加到我的 application.html.erb 文件中，它只适用于文件。这是下面的脚本：
//Javascript//
$( "#accordion" ).accordion();
var availableTags = [
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});
$( "#button" ).button();
$( "#radioset" ).buttonset();
$( "#tabs" ).tabs();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
$( "#datepicker" ).datepicker({
inline: true
});
$( "#slider" ).slider({
range: true,
values: [ 17, 67 ]
});
$( "#progressbar" ).progressbar({
value: 20
});
$( "#spinner" ).spinner();
$( "#menu" ).menu();
$( "#tooltip" ).tooltip();
$( "#selectmenu" ).selectmenu();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
这在我的 application.html.erb 文件中被 <script> 标签包裹，没有任何问题。一旦我创建了一个名为 theme.js 的文件并将其放入“/vendor/assets/javascripts”并更新了我的 application.js 文件：
// 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, vendor/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.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require theme
它停止工作。我也尝试将 theme.js 放在“app/assets/javascripts”中，但也没有用。
这是 application.html.erb 文件的头部：
<!DOCTYPE html>
<html class="bootstrap-layout">
<head>
<title>App</title>
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Roboto Web Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
<%= javascript_include_tag 'https://code.jquery.com/jquery-2.2.3.js' %>
<%= javascript_include_tag 'https://code.jquery.com/ui/1.11.4/jquery-ui.js' %>
<%= csrf_meta_tags %>
</head>
我确定这是我缺少的基本内容，我只是不知道它是什么。我还删除了认为这可能是问题的 turbolinks，但是删除它并没有做任何事情。
【问题讨论】：
-
MT，你应该从这个开始：edgeguides.rubyonrails.org/asset_pipeline.html
-
@SzilardMagyar，我读过那一页，但我会再读一遍。
标签： javascript jquery html css ruby-on-rails