私はこのページを持っています:
並べ替え可能なオプションがあります。アイテムを下のテーブルから上のテーブルに移動します。現時点では、2 つのアイテムしかありません (各テーブルには 1 つのアイテムがあります)。
上のテーブルには、完了していないワーカーのタスクが含まれ、下のテーブルには、完了したワーカーのタスクが含まれています。
単語: はい/いいえは、タスクが完了したかどうかを示します。
私は次のことをしようとしています:
ユーザーがアイテムを下のテーブルから上のテーブルに移動すると、チェックボックスが自動的にチェックされるようになります(したがって、常に「はい」から「いいえ」に移動します)。
これは私のものです(値が変更されている間にデータベースを更新するため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 2 つの body と 2 つの html があることはわかっています。明日注文します。