“(#tabs).tabs 不是函数” - 使用 rails 3.1.3 安装 jquery 有什么问题？答案

【问题标题】："(#tabs).tabs is not a function" - What's wrong with jquery installation with rails 3.1.3?“(#tabs).tabs 不是函数” - 使用 rails 3.1.3 安装 jquery 有什么问题？
【发布时间】：2012-03-06 01:39:37
【问题描述】：

当使用 localhost:3000 加载登录页面并且页面挂起时，错误（在 application.js 中）显示在 firebug 中。 Gemfile 看起来像：

gem 'jquery-rails', '~>1.0.19'

application.js文件中导致上述错误的代码（包括require）是：

//= require jquery
//= require jquery_ujs
//= require_tree .

$(document).ready(function() {
    $("#tabs").tabs();
});

代码的目的是加载用户菜单选项卡，并且是另一个工作应用程序的副本。

在 applicaion.html.erb 中，我们有以下内容：

<head>
  <title><%= title %></title>
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>

关于错误的任何想法？非常感谢。

更新：

页面的html源代码：

<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
  <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>

<script src="/assets/user_menus.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="qdYThMHV8HB+Joc9HnE3ZiR/S0hkIeulOuMsIt3iFiw=" name="csrf-token" />
</head>

<body id="login">



<h1>Login</h1>
<form accept-charset="UTF-8" action="/session" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="qdYThMHV8HB+Joc9HnE3ZiR/S0hkIeulOuMsIt3iFiw=" /></div>

<div>
    <p><label for="email">Name：</label> <input id="email" name="email" type="text" value="" /></p>
    <p><label for="password">Password：</label> <input id="password" name="password" type="password" value="" /></p>
    <p><label></label><input class="button" name="commit" type="submit" value="login" /></p>
</div>
</form>

</body>
</html>

【问题讨论】：

查看 HTML 源代码并将其包含在问题中。
您能否在您的页面中包含生成的源代码（即单击“查看源代码”给您的信息）？确保所有必要的 JS 实际上都包含在内。

标签： jquery ruby-on-rails ruby-on-rails-3.1

【解决方案1】：

如果您想使用 jQuery UI 功能，您需要将//= require jquery-ui 添加到您的application.js 文件中。

见the project's README

【讨论】：

如果添加 jquery_ui，则会出现错误：找不到文件 'jquery_ui'（在 D:/rails_proj/byop/app/assets/javascripts/application.js:9 中）。第 9 行是 //= 需要 jquery_ui。
@user938363: jquery-ui != jquery_ui

【解决方案2】：

用户938363，

上面的代码是你拥有的整个 html 吗？如果没有，能否请您粘贴生成的代码，这真的很有帮助。

反正第一眼看不出<div id='tabs'>在哪里？？通过添加此元素，您可以进一步进步（当然，除非<%= csrf_meta_tags %> 使用适当的 div/id 填充 div。

【讨论】：

在 user_menus 视图中处于部分形式。

【解决方案3】：

让我先说我没有使用过 Ruby。

但是，该消息与在未加载 jquery.js 时尝试使用 jquery 一致。

使用浏览器的视图源查看<%= javascript_include_tag "application" %> 实际扩展为什么。如有必要，添加 html cmets 以描述该行代码生成的内容。

<!-- before -->
<%= javascript_include_tag "application" %>
<!-- after -->

【讨论】：