How can I get a list of selected items when using jQuerys UI selectable?

user_10515503 0
Viewed 44

I'm currently building a file download in PHP like Google Drive but just a way more simple. So in my case I have a list with some files. To get rid of a download button in each row, I planned using a single download button and jQuerys seleactable function:

$( "#storage-files-table" ).selectable();

Now I can select single or multiple rows. When I press my download button now, I want to get a list of all selected elements so that I now which file should be served for download. Does anyone know how I can get this done? 

jQuery(document).ready(function($) {
  $("table").selectable();
});

function download() {
  //Here I want to get a list of all selected rows
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="download()">Download</button>
<table>
  <thead>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr>
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>

jquery-ui html jquery javascript
2 Answers
  • You could find the selected elements by using .find("tr.ui-selected").
  • Also, don't forget to use tbody as your selectee, if you plan to select rows.
  • jQuery library should lead the jQuery-UI library, so make sure to first call jQuery, and than it's UI extension.
  • Stop using inline on-handler JS. It's hard to debug and trace errors. JS should be in one place, not dispersed in HTML files. 

jQuery(function($) {

  const $tbody = $("#myTable tbody");
  
  function download() {
    //Here I want to get a list of all selected rows
    const $trSelected = $tbody.find("tr.ui-selected");
    // Collect data-file-id values
    const IDs = $trSelected.get().map(tr => tr.dataset.fileId);
    console.log( IDs );
  }

  $tbody.selectable();
  $("#download").on('click', download);

});
.ui-selected td {
  background: #0bf;
}
<button id="download">Download</button>
<table id="myTable">
  <thead>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </thead>
  <tbody>
    <tr data-file-id="a595">
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr data-file-id="b456">
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr data-file-id="c753">
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

user_3839040

Consider the following example.

jQuery(document).ready(function($) {
  function download(e) {
    e.preventDefault();
    var selected = $("tr.ui-selected");
    var sArr = [];
    if (selected.length) {
      selected.each(function(i, el) {
        sArr.push($(el).data("file"));
      });
      // perform download using Array
    } else {
      return false;
    }
  }

  $("#download-table tbody").selectable({
    stop: function() {
      var result = $("#select-result").empty();
      result.append("You have selected: ");
      $("tr.ui-selected", this).each(function(i, el) {
        result.append($(el).data("file-name") + " ");
      });
      if ($("tr.ui-selected").length) {
        $("#download").prop("disabled", false);
      } else {
        $("#download").prop("disabled", true);
      }
    }
  });

  $("#download").click(download);
});
#download-table {
  font-size: 1.4em;
}

#download-table .ui-selecting {
  background: #FECA40;
}

#download-table .ui-selected {
  background: #F39814;
  color: white;
}

#download-table td {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h2>Select your downloads.</h2>
<table id="download-table">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
    <th>col 3</th>
  </thead>
  <tbody>
    <tr id="row-1" data-file="hash-1" data-file-name="Name1.zip">
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr id="row-2" data-file="hash-2" data-file-name="Name2.zip">
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr id="row-3" data-file="hash-3" data-file-name="Name1.zip">
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>
<div id="select-result"></div>
<button id="download" disabled="disabled">Download</button>

This adds to what you have so the User cannot download nothing or trip things up. You will need to create the Rows with the proper details or data attributes.

If you want to select specific Cells, consider this example: https://jqueryui.com/selectable/#display-grid

user_4633190
Related