【发布时间】:2019-05-22 23:47:11
【问题描述】:
我是一名初级程序员,正在尝试使用 Ruby on Rails。
我已将可排序的 UI 添加到我的待办事项列表应用程序中。我可以拖放列表项,但没有设法让新职位保留在数据库中。
当我拖放列表项时,我的 Safari 浏览器上的调试器显示错误:
ReferenceError:找不到变量:Rails
我正在关注本教程: https://www.youtube.com/watch?v=Aru-XvzzGjU
我的猜测是 task.js 文件,其中没有找到变量 Ruby on Rails。当我将 jQuery 脚本移到 jQuery UI 脚本下方时,错误消失,但提示另一个错误
未捕获的类型错误:$(...).sortable 不是函数
tasks.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'),
});
}
}
);
});
application.css:
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require jquery-ui/widget
//= require jquery-ui/widgets/sortable
//= require rails_sortable
index.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">
task.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
【问题讨论】:
-
已解决。实现只需要在application.js文件中添加//= require rails-ujs
标签: jquery ruby-on-rails jquery-ui-sortable