EDIT:: I came up with a solution. See bottom of this post
I have a table I'm trying to get setup with selectable. I'm not a javascript/jquery coder by any means (as my code will show). I'm trying to limit the selectable range to 1 table row then send the starting cell id and ending cell id to another page. I know how to send data via $.post but I can't get the right data or limit it to 1 row.
I did find this post but it limits to table columns and I don't know enough about JS to reverse that to limit to table row.
Here's a JSFiddle, which doesn't work (hence why I'm here) and below is my code. Here's the HTML
<div id="reservation-sheet" style="display: block;">
<table>
<thead>
<tr>
<th>Size</th>
<th>8:00</th>
<th>8:30</th>
<th>9:00</th>
<th>9:30</th>
<th>10:00</th>
<th>10:30</th>
<th>11:00</th>
<th>11:30</th>
<th>12:00</th>
<th>12:30</th>
<th>1:00</th>
<th>1:30</th>
<th>2:00</th>
<th>2:30</th>
<th>3:00</th>
<th>3:30</th>
<th>4:00</th>
<th>4:30</th>
<th>5:00</th>
<th>5:30</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr id="0">
<td id="0-size" class="size">20'</td>
<td id="0-8.00" class="open"> </td>
<td id="0-8.50" class="open"> </td>
<td id="0-9.00" class="open"> </td>
<td id="0-9.50" class="open"> </td>
<td id="0-10.00" class="open"> </td>
<td id="0-10.50" class="open"> </td>
<td id="0-11.00" class="open"> </td>
<td id="0-11.50" class="open"> </td>
<td id="0-12.00" class="open"> </td>
<td id="0-12.50" class="open"> </td>
<td id="0-13.00" class="open"> </td>
<td id="0-13.50" class="open"> </td>
<td id="0-14.00" class="open"> </td>
<td id="0-14.50" class="open"> </td>
<td id="0-15.00" class="open"> </td>
<td id="0-15.50" class="open"> </td>
<td id="0-16.00" class="open"> </td>
<td id="0-16.50" class="open"> </td>
<td id="0-17.00" class="open"> </td>
<td id="0-17.50" class="open"> </td>
<td id="0-18.00" class="open"> </td>
</tr>
<tr id="1">
<td id="1-size" class="size">20'</td>
<td id="1-8.00" class="open"> </td>
<td id="1-8.50" class="open"> </td>
<td id="1-9.00" class="open"> </td>
<td id="1-9.50" class="open"> </td>
<td id="1-10.00" class="open"> </td>
<td id="1-10.50" class="open"> </td>
<td id="1-11.00" class="open"> </td>
<td id="1-11.50" class="open"> </td>
<td id="1-12.00" class="open"> </td>
<td id="1-12.50" class="open"> </td>
<td id="1-13.00" class="open"> </td>
<td id="1-13.50" class="open"> </td>
<td id="1-14.00" class="open"> </td>
<td id="1-14.50" class="open"> </td>
<td id="1-15.00" class="open"> </td>
<td id="1-15.50" class="open"> </td>
<td id="1-16.00" class="open"> </td>
<td id="1-16.50" class="open"> </td>
<td id="1-17.00" class="open"> </td>
<td id="1-17.50" class="open"> </td>
<td id="1-18.00" class="open"> </td>
</tr>
<tr id="2">
<td id="2-size" class="size">20'</td>
<td id="2-8.00" class="open"> </td>
<td id="2-8.50" class="open"> </td>
<td id="2-9.00" class="open"> </td>
<td id="2-9.50" class="open"> </td>
<td id="2-10.00" class="open"> </td>
<td id="2-10.50" class="open"> </td>
<td id="2-11.00" class="open"> </td>
<td id="2-11.50" class="open"> </td>
<td id="2-12.00" class="open"> </td>
<td id="2-12.50" class="open"> </td>
<td id="2-13.00" class="open"> </td>
<td id="2-13.50" class="open"> </td>
<td id="2-14.00" class="open"> </td>
<td id="2-14.50" class="open"> </td>
<td id="2-15.00" class="open"> </td>
<td id="2-15.50" class="open"> </td>
<td id="2-16.00" class="open"> </td>
<td id="2-16.50" class="open"> </td>
<td id="2-17.00" class="open"> </td>
<td id="2-17.50" class="open"> </td>
<td id="2-18.00" class="open"> </td>
</tr>
<tr id="3">
<td id="3-size" class="size">20'</td>
<td id="3-8.00" class="open"> </td>
<td id="3-8.50" class="open"> </td>
<td id="3-9.00" class="open"> </td>
<td id="3-9.50" class="open"> </td>
<td id="3-10.00" class="open"> </td>
<td id="3-10.50" class="open"> </td>
<td id="3-11.00" class="open"> </td>
<td id="3-11.50" class="open"> </td>
<td id="3-12.00" class="open"> </td>
<td id="3-12.50" class="open"> </td>
<td id="3-13.00" class="open"> </td>
<td id="3-13.50" class="open"> </td>
<td id="3-14.00" class="open"> </td>
<td id="3-14.50" class="open"> </td>
<td id="3-15.00" class="open"> </td>
<td id="3-15.50" class="open"> </td>
<td id="3-16.00" class="open"> </td>
<td id="3-16.50" class="open"> </td>
<td id="3-17.00" class="open"> </td>
<td id="3-17.50" class="open"> </td>
<td id="3-18.00" class="open"> </td>
</tr>
</tbody>
</table>
</div>
Here's the JS
$(document).ready(function() {
var startingRow = 0;
var startingTime = 0;
$('#reservation-sheet').selectable({
filter: 'tr, td', //lets filter to tr and td
start: function(event, ui) {
var startingItem = $('.ui-selecting', this);
startingRow = startingItem.prop('id'); //should be the ID of the starting row
startingTime = startingItem.last().prop('id'); //should be the id of the starting cell
},
selecting: function(event, ui) {
var selectingItems = $('.ui-selecting', this);
//during the selecting process lets make sure we limit to 1 row
if (selectingItems.prop('id') != startingRow) {
selectingItems.not(':first').removeClass('ui-selecting');
}
},
stop: function(event, ui) {
var selectedItems = $('.ui-selected', this);
var endTime = selectedItems.last().prop('id'); //in theory this should be the last selcted cell
//$.post('contact.php', {sTime: startingTime, eTime: endTime, id: startingRow}, function(data, status) {
//pop-up window to get name, email and phone number
//then submit everything
//});
}
});
});
Here's the CSS
table {
width: 100%;
}
th,
td {
border: 2px solid #000;
text-align: center;
}
tr {
background-color: #CCC;
}
#reservation-sheet td.ui-selecting {
background-color: #FECA40;
}
#reservation-sheet td.ui-selected {
background-color: #F39814;
}
EDIT:: I was able to work out a solution...maybe not the prettiest but it works
$(document).ready(function() {
$('#reservation-sheet').selectable({
filter: 'tr, td', //lets filter to tr and td
selecting: function(event, ui) {
var selectingItems = $('.ui-selecting', this);
var startingRow = selectingItems.first().prop('id'); //starting row id
var splitCell = selectingItems.last().prop('id').split('-'); //since we have the row id in the cell id, we can use that to find changes
if(splitCell[0] != startingRow) {
selectingItems.not(':first').removeClass('ui-selecting'); //remove extra row to keep it at 1
}
},
stop: function(event, ui) {
var selectedItems = $('.ui-selected', this);
var startTime = selectedItems[Object.keys(selectedItems)[1]];
var startTime2 = startTime['id']; //get our starting cell
var endTime = selectedItems.last().prop('id'); //get our last cell
console.log('send to php: startingTime: '+ startTime2 +' endingTime: '+ endTime);
//$.post('contact.php', {sTime: startingTime, eTime: endTime}, function(data, status) {
//pop-up window to get name, email and phone number
//then submit everything
//});
}
});
});
