1
タスク優先度を備えた簡単なToDoを構築しています。ユーザーがテーブルの優先度セルをクリックしてタスクの優先度を編集できるようにしたい新しい優先度を選択して、ajax経由でバックエンドに送信することができます。部分的なレールの再ロード時にスコープが混乱する
現在はうまく動作しますが、初めてタスクテーブルの一部をリロードすると完全に壊れてしまいますが、本体のクリックは検出されていますが、私はそれを把握することはできません。
var priorityUpdater;
priorityUpdater = function() {
var pCells = document.getElementsByClassName('priority-cell');
$('.task-table')[0].onscroll = function() {
if ($('.priority-changer')[0]) {
$('.priority-changer')[0].remove();
}
}
document.body.onclick = function() {
if ($('.priority-changer')[0]) {
$('.priority-changer')[0].remove();
}
}
for (var i=0; i < pCells.length; i++) {
pCells[i].onclick = function (e) {
if (!$('.priority-changer')[0]) {
var div = document.createElement('div');
var currentPriority = this.getElementsByClassName('red').length
var taskId = this.id
div.className = 'priority-changer';
div.style.top = (this.getBoundingClientRect()['top'] + 2) + 'px';
div.style.left = (this.getBoundingClientRect()['left'] + 20) + 'px';
div.innerHTML =
'<label for="'+'task-'+taskId+'">Priority</label>' +
'<select name="priority" id="'+'task-'+taskId+'">' +
'<option value="1"'+ ((currentPriority === 1) ? 'selected' : '') + '>1</option>' +
'<option value="2"'+ ((currentPriority === 2) ? 'selected' : '') + '>2</option>' +
'<option value="3"'+ ((currentPriority === 3) ? 'selected' : '') + '>3</option>' +
'<option value="4"'+ ((currentPriority === 4) ? 'selected' : '') + '>4</option>' +
'<option value="5"'+ ((currentPriority === 5) ? 'selected' : '') + '>5</option>' +
'</select>';
e.target.appendChild(div);
e.stopPropagation();
$('.priority-changer')[0].onclick = function (e) {
e.stopPropagation();
};
$('#task-'+taskId).change(function() {
$.ajax({url:'/tasks', type: 'PATCH', data:{task: {id: taskId, priority: $(this).val()}}});
});
};
};
};
};
$(window).load(function() {
return priorityUpdater();
});