OK this might be a bit of a long one, so please stick with me!
I have a timetable grid in HTML showing periods/days and each cell is set a class of "selectable".
I then use jQuery UI Selectable to let me select only the cells set as selectable (to stop the table headers being selected). When you finish selecting, the javascript adds hidden fields to a form, ready to be picked up by POST.
Here is where the error comes in.
If you drag over multiple cells and click BOOK, it passes them correctly (3 cells selected and passed via hidden input). If you drag over multiple cells, but then single select a different cell and click BOOK it seems to pick up some of the previous multiple selection.
Now stranger still, it doesn't do this in Firefox, or my copy of IE9, yet on other IE9 copies it does cause this error. I need it to work on IE8/9/10 due to educational environment where we can't really use FF or anything else.
Here are the JavaScript bits I have....
Admittedly they may look messy, I've never used JavaScript before really, but the selected function works how I want. It's the unselected function that seems to cause problems.
$( "#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();
})
});
If any other code from the page is needed, please let me know.
Just to sort of go over it, if I drag over Mon-P1 / Mon-P2 / Mon-P3 / Mon-P4 and click BOOK, it shows them correct. If I drag over the same 4 but then single select Tue-P1 (which should deselect all the rest and select that), it gives me:
Tue-P1 / Mon-P2 / Mon-P3 / Mon-P4
It's as though it's only deselected the first element, not the rest. Would it need something like a $(".ui-selected").each() function to loop through all entries?
