少し長くなるかもしれませんが、お付き合いください！
期間/日を示す HTML の時刻表グリッドがあり、各セルは「選択可能」のクラスに設定されています。
次に、jQuery UI Selectable を使用して、選択可能として設定されたセルのみを選択できるようにします (テーブル ヘッダーが選択されないようにするため)。選択が完了すると、javascript は隠しフィールドをフォームに追加し、POST で取得できるようにします。
ここでエラーが発生します。
複数のセルをドラッグして BOOK をクリックすると、それらが正しく渡されます (3 つのセルが選択され、非表示の入力を介して渡されます)。複数のセルをドラッグした後、別のセルを 1 つ選択して BOOK をクリックすると、以前の複数選択の一部が選択されたように見えます。
さらに奇妙なことに、Firefox や私の IE9 のコピーではこれは行われませんが、他の IE9 のコピーではこのエラーが発生します。FFなどを実際に使用できない教育環境のため、IE8/9/10で動作させる必要があります。
これが私が持っているJavaScriptビットです....
確かに、それらは乱雑に見えるかもしれません。私は実際に JavaScript を使用したことがありませんが、選択した関数は希望どおりに機能します。問題を引き起こすと思われるのは、選択されていない機能です。
$( "#selectable" ).selectable({
filter: ".selectable",
selected: function() {
var count = 0;
$( ".ui-selected", this ).each(function() {
var data = $(this).data();
$(data).each(function(key, value){
var room_id = document.createElement("input");
room_id.setAttribute("type", "hidden");
room_id.setAttribute("name", "booking["+count+"][room]");
room_id.setAttribute("value", data.room);
room_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(room_id);
var date_id = document.createElement("input");
date_id.setAttribute("type", "hidden");
date_id.setAttribute("name", "booking["+count+"][date]");
date_id.setAttribute("value", data.date);
date_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(date_id);
var period_id = document.createElement("input");
period_id.setAttribute("type", "hidden");
period_id.setAttribute("name", "booking["+count+"][period]");
period_id.setAttribute("value", data.period);
period_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(period_id);
var day_id = document.createElement("input");
day_id.setAttribute("type", "hidden");
day_id.setAttribute("name", "booking["+count+"][day]");
day_id.setAttribute("value", data.day);
day_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(day_id);
var bookable_id = document.createElement("input");
bookable_id.setAttribute("type", "hidden");
bookable_id.setAttribute("name", "booking["+count+"][bookable]");
bookable_id.setAttribute("value", data.bookable);
bookable_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(bookable_id);
var bookable_id_delete = document.createElement("input");
bookable_id_delete.setAttribute("type", "hidden");
bookable_id_delete.setAttribute("name", "booking["+count+"][bookable]");
bookable_id_delete.setAttribute("value", data.bookable);
bookable_id_delete.setAttribute("class", "js-added");
document.getElementById("delete").appendChild(bookable_id_delete);
var booking_id_delete = document.createElement("input");
booking_id_delete.setAttribute("type", "hidden");
booking_id_delete.setAttribute("name", "booking["+count+"][booking_id]");
booking_id_delete.setAttribute("value", data.bookingid);
booking_id_delete.setAttribute("class", "js-added");
document.getElementById("delete").appendChild(booking_id_delete);
var bookable_id_edit = document.createElement("input");
bookable_id_edit.setAttribute("type", "hidden");
bookable_id_edit.setAttribute("name", "booking["+count+"][bookable]");
bookable_id_edit.setAttribute("value", data.bookable);
bookable_id_edit.setAttribute("class", "js-added");
document.getElementById("edit").appendChild(bookable_id_edit);
var booking_id_edit = document.createElement("input");
booking_id_edit.setAttribute("type", "hidden");
booking_id_edit.setAttribute("name", "booking["+count+"][booking_id]");
booking_id_edit.setAttribute("value", data.bookingid);
booking_id_edit.setAttribute("class", "js-added");
document.getElementById("edit").appendChild(booking_id_edit);
count = count + 1;
});
});
},
unselected: (function(){
$('div').removeClass('ui-selected');
$(".js-added").remove();
})
});
このページの他のコードが必要な場合は、お知らせください。
ちょっと調べてみると、Mon-P1 / Mon-P2 / Mon-P3 / Mon-P4 をドラッグして BOOK をクリックすると、正しく表示されます。同じ 4 をドラッグしてから、Tue-P1 を 1 つ選択すると (残りのすべての選択を解除して選択する必要があります)、次のようになります。
火-P1 / 月-P2 / 月-P3 / 月-P4
残りの要素ではなく、最初の要素のみを選択解除したかのようです。$(".ui-selected").each()すべてのエントリをループする関数のようなものが必要ですか?