How to limit jquery selectable to 1 tr and pass selected items to another page


Tags: javascript,jquery,html,css,jquery-ui

Problem :

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">&nbsp;</td>
        <td id="0-8.50" class="open">&nbsp;</td>
        <td id="0-9.00" class="open">&nbsp;</td>
        <td id="0-9.50" class="open">&nbsp;</td>
        <td id="0-10.00" class="open">&nbsp;</td>
        <td id="0-10.50" class="open">&nbsp;</td>
        <td id="0-11.00" class="open">&nbsp;</td>
        <td id="0-11.50" class="open">&nbsp;</td>
        <td id="0-12.00" class="open">&nbsp;</td>
        <td id="0-12.50" class="open">&nbsp;</td>
        <td id="0-13.00" class="open">&nbsp;</td>
        <td id="0-13.50" class="open">&nbsp;</td>
        <td id="0-14.00" class="open">&nbsp;</td>
        <td id="0-14.50" class="open">&nbsp;</td>
        <td id="0-15.00" class="open">&nbsp;</td>
        <td id="0-15.50" class="open">&nbsp;</td>
        <td id="0-16.00" class="open">&nbsp;</td>
        <td id="0-16.50" class="open">&nbsp;</td>
        <td id="0-17.00" class="open">&nbsp;</td>
        <td id="0-17.50" class="open">&nbsp;</td>
        <td id="0-18.00" class="open">&nbsp;</td>
      </tr>
      <tr id="1">
        <td id="1-size" class="size">20'</td>
        <td id="1-8.00" class="open">&nbsp;</td>
        <td id="1-8.50" class="open">&nbsp;</td>
        <td id="1-9.00" class="open">&nbsp;</td>
        <td id="1-9.50" class="open">&nbsp;</td>
        <td id="1-10.00" class="open">&nbsp;</td>
        <td id="1-10.50" class="open">&nbsp;</td>
        <td id="1-11.00" class="open">&nbsp;</td>
        <td id="1-11.50" class="open">&nbsp;</td>
        <td id="1-12.00" class="open">&nbsp;</td>
        <td id="1-12.50" class="open">&nbsp;</td>
        <td id="1-13.00" class="open">&nbsp;</td>
        <td id="1-13.50" class="open">&nbsp;</td>
        <td id="1-14.00" class="open">&nbsp;</td>
        <td id="1-14.50" class="open">&nbsp;</td>
        <td id="1-15.00" class="open">&nbsp;</td>
        <td id="1-15.50" class="open">&nbsp;</td>
        <td id="1-16.00" class="open">&nbsp;</td>
        <td id="1-16.50" class="open">&nbsp;</td>
        <td id="1-17.00" class="open">&nbsp;</td>
        <td id="1-17.50" class="open">&nbsp;</td>
        <td id="1-18.00" class="open">&nbsp;</td>
      </tr>
      <tr id="2">
        <td id="2-size" class="size">20'</td>
        <td id="2-8.00" class="open">&nbsp;</td>
        <td id="2-8.50" class="open">&nbsp;</td>
        <td id="2-9.00" class="open">&nbsp;</td>
        <td id="2-9.50" class="open">&nbsp;</td>
        <td id="2-10.00" class="open">&nbsp;</td>
        <td id="2-10.50" class="open">&nbsp;</td>
        <td id="2-11.00" class="open">&nbsp;</td>
        <td id="2-11.50" class="open">&nbsp;</td>
        <td id="2-12.00" class="open">&nbsp;</td>
        <td id="2-12.50" class="open">&nbsp;</td>
        <td id="2-13.00" class="open">&nbsp;</td>
        <td id="2-13.50" class="open">&nbsp;</td>
        <td id="2-14.00" class="open">&nbsp;</td>
        <td id="2-14.50" class="open">&nbsp;</td>
        <td id="2-15.00" class="open">&nbsp;</td>
        <td id="2-15.50" class="open">&nbsp;</td>
        <td id="2-16.00" class="open">&nbsp;</td>
        <td id="2-16.50" class="open">&nbsp;</td>
        <td id="2-17.00" class="open">&nbsp;</td>
        <td id="2-17.50" class="open">&nbsp;</td>
        <td id="2-18.00" class="open">&nbsp;</td>
      </tr>
      <tr id="3">
        <td id="3-size" class="size">20'</td>
        <td id="3-8.00" class="open">&nbsp;</td>
        <td id="3-8.50" class="open">&nbsp;</td>
        <td id="3-9.00" class="open">&nbsp;</td>
        <td id="3-9.50" class="open">&nbsp;</td>
        <td id="3-10.00" class="open">&nbsp;</td>
        <td id="3-10.50" class="open">&nbsp;</td>
        <td id="3-11.00" class="open">&nbsp;</td>
        <td id="3-11.50" class="open">&nbsp;</td>
        <td id="3-12.00" class="open">&nbsp;</td>
        <td id="3-12.50" class="open">&nbsp;</td>
        <td id="3-13.00" class="open">&nbsp;</td>
        <td id="3-13.50" class="open">&nbsp;</td>
        <td id="3-14.00" class="open">&nbsp;</td>
        <td id="3-14.50" class="open">&nbsp;</td>
        <td id="3-15.00" class="open">&nbsp;</td>
        <td id="3-15.50" class="open">&nbsp;</td>
        <td id="3-16.00" class="open">&nbsp;</td>
        <td id="3-16.50" class="open">&nbsp;</td>
        <td id="3-17.00" class="open">&nbsp;</td>
        <td id="3-17.50" class="open">&nbsp;</td>
        <td id="3-18.00" class="open">&nbsp;</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
      //});
     }
    });
   });


Solution :

Here's the solution I came up with. As I say in OP it may not be the prettiest way to do this but it works. Posting it so it may help someone else.

$(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
      //});
     }
    });
   });

    CSS Howto..

    How to avoid display block for a particular div element using css

    How to rotate top-border around the circle?

    How to stretch image in img tag larger than its natural size?

    How to place something in a triangle-shaped box?

    How to stretch a div to the viewport bottom without using absolute positioning?

    How do I position images left and right in wordpress post

    How to strongly force line-height in css, with no streches?

    How to clear the parent css

    How to format text wrapped inside specific symbols within a html structure and format it

    How to create correct .css for Html.TextBoxFor

    How to apply CSS to only immediate children of a certain class

    Show submit button as an image

    CSS: How to set minimum and maximum height according to inside?

    How to get a background image to work in CSS and HTML?

    HTML with CSS: How to style font in a table?

    Any idea how to add this sinking hover effect to an image/link?

    CSS background 100% height - How to do?

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    CSS: How to fix the width of a vertical menu?

    How to make a css navigation menu “selected” option still clickable

    How to pass css :active pseudo class to javascript?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to implement CSS sprite background into existing Javascript variable?

    How to indent items of a sublist using css and html in wordpress

    How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

    How do I correctly position elements and lay out a page?

    CSS slideshow - How can I add a link to the image?

    How to move one element to the right of another using CSS?

    How to achieve following graphics via css

    A CSS question: why is the Facebook Share button often styled as “icon” + text to fake as a button, and how to do it well?