我有这个页面：
有一个可排序的选项：将项目从下表移动到上表。此刻，我只有两个项目（每张桌子都有一个项目）。
上表包含未完成的工作人员的任务，下表包含工作人员已完成的任务。
这个词：是/否表示任务是否完成。
我正在尝试做下一件事：
当用户将项目从下表移动到上表时，我希望自动选中复选框（因此它总是从“是”移动到“否”）。
这是我的index.html.erb（我用于best_in_place在值更改时更新数据库）：
<html>
<body>
<ul id="sortable1" class="connectedSortable">
<% @tasks_worker_todo.each do |task| %>
<li class="ui-state-default">
<%= best_in_place task, :done, :classes => 'highlight_on_success', type: :checkbox, collection: %w[No Yes] %> |
<%= task.admin_mail %> |
<%= task.task %>
</li>
<% end %>
</ul>
<br><br>
<ul id="sortable2" class="connectedSortable">
<% @tasks_worker_done.each do |task| %>
<li class="ui-state-highlight">
<%= best_in_place task, :done,:classes => 'highlight_on_success', type: :checkbox, collection: %w[No Yes] %> |
<%= task.admin_mail %> |
<%= task.task %>
</li>
<% end %>
</ul>
这是我的application.js
$(document).ready(function(){
jQuery('#sortable1, #sortable2')
.sortable(
{'connectWith':'#sortable1',
'dropOnEmpty':true,
'scroll':true,
items: "li:not(.emptyMessage)",
receive: function(event, ui) {
alert('moved');
//hide empty message on receiver
$('li.emptyMessage', this).hide();
//show empty message on sender if applicable
if($('li:not(.emptyMessage)', ui.sender).length == 0){
$('li.emptyMessage', ui.sender).show();
alert('alon');
} else {
$('li.emptyMessage', ui.sender).hide();
}
}
});
});
任何帮助表示赞赏！
更新：
这是 ruby 生成的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>TODOLIST</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/admin.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/tasksadmins.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/workers.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.purr.js?body=1" type="text/javascript"></script>
<script src="/assets/best_in_place.js?body=1" type="text/javascript"></script>
<script src="/assets/admin.js?body=1" type="text/javascript"></script>
<script src="/assets/myjquery.js?body=1" type="text/javascript"></script>
<script src="/assets/tasksadmins.js?body=1" type="text/javascript"></script>
<script src="/assets/workers.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="FZho6dNmNWjn82HB+MzhL/MtIm4s6F7JFiLVysPCREY=" name="csrf-token" />
</head>
<body>
<div id="right">
<li><a href="/users/sign_out" data-method="delete" rel="nofollow">Sign out</a></li>
</div>
<p id="notice"></p>
<p id="alert"></p>
<center>
<html>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">
<span class='best_in_place highlight_on_success' id='best_in_place_tasksadmin_1_done' data-url='/tasksadmins/1' data-object='tasksadmin' data-collection='["No","Yes"]' data-attribute='done' data-type='checkbox'>No</span> |
admin216@gmail.com |
feed the dog
</li>
</ul>
<br><br>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">
<span class='best_in_place highlight_on_success' id='best_in_place_tasksadmin_2_done' data-url='/tasksadmins/2' data-object='tasksadmin' data-collection='["No","Yes"]' data-attribute='done' data-type='checkbox'>Yes</span> |
admin216@gmail.com |
feed the fish
</li>
</ul>
</body>
</html>
</center>
</body>
</html>
ps 我知道我有两个body 和两个html。我明天会订购。