时间戳

首页 > 解决方案 > ReferenceError：找不到变量：Rails

jquery - ReferenceError：找不到变量：Rails

问题描述

我是一名尝试 Ruby on Rails 的初学者程序员。

我已将可排序的 UI 添加到我的待办事项列表应用程序中。我能够拖放列表项，但没有设法让新职位保留在数据库中。

当我拖放列表项时，我的 Safari 浏览器上的调试器显示错误：

ReferenceError：找不到变量：Rails

我正在关注本教程： https ://www.youtube.com/watch?v=Aru-XvzzGjU

我的猜测是task.js文件，其中没有找到变量 Ruby on Rails。当我将 jQuery 脚本移动到 jQuery UI 脚本下方时，错误消失，但提示另一个错误

未捕获的类型错误：$(...).sortable 不是函数

任务.js：

document.addEventListener("turbolinks:load", function () {

  $("#tasks").sortable(
    {
      update: function(e, ui) {
        //console.log($(this).sortable('serialize'));
        Rails.ajax({
          url: $(this).data("url"),
          type: "PATCH",
          data: $(this).sortable('serialize'),
        });
      }
    }
  );
});

应用程序.css：

//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require jquery-ui/widget
//= require jquery-ui/widgets/sortable
//= require rails_sortable

索引.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<%= stylesheet_link_tag "application" %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">

任务.rb：

class Task < ApplicationRecord
  validates :title, :description, presence:true
  acts_as_list scope: [:title, :description]
end

任务控制器：

class TasksController < ApplicationController
  # create new instance of the task
  def index
    @task = Task.order(:position)
  end

  def new
    @task = Task.new
  end

  def create
    #create a new instance
    @task = Task.new(task_params)
    @task.save

    #redirect to url
    redirect_to @task
  end

  def show
    find_task
  end

  def edit
    find_task
  end

  def update
    find_task
    @task.update(task_params)

    redirect_to @task
  end

  def destroy
    find_task.destroy

    redirect_to tasks_path
  end

  def sort

    params[:task].each_with_index do |id, index|
      Task.where(id: id).update_all({position:index + 1})
    end

    head :ok

  end

end

private
  def task_params
    params.require(:task).permit(:title, :description)
  end

  def find_task
    @task  = Task.find(params[:id])
    return @task
  end

标签： jqueryruby-on-railsjquery-ui-sortable

解决方案

我意识到我只需要在application.js文件中添加它：

//= 需要 rails-ujs

推荐阅读