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

Question

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>

Does this answer your question? jquery ui selectable get id? — devlin carnate
– devlin carnate, Commented Jun 5, 2020 at 15:43
@devlincarnate No, it does not help me! I'm trying to get everything from an external function. ;) — Mr. Jo
– Mr. Jo, Commented Jun 5, 2020 at 15:48
sure it does... you can get the items using .ui-selected , which is mentioned in the first answer in the link above, and also shown in the answer someone has posted below. — devlin carnate
– devlin carnate, Commented Jun 5, 2020 at 15:54
Do you want the Row information, Cell Information, or the text details from inside the cell? — Twisty
– Twisty, Commented Jun 5, 2020 at 16:34

Roko C. Buljan · Accepted Answer · 2020-06-05 15:58:40Z

1

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>

edited Jun 5, 2020 at 15:58

answered Jun 5, 2020 at 15:47

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr. Jo Over a year ago

Is it possible to get a list of data attributes from every selected row? I've planned to encrypt every selected primary key regarding to the file in the DB and set it as data-file-id so that I know which files should be served. Or do you have a better idea? Is this safe?

Roko C. Buljan Over a year ago

@Mr.Jo it's not only safe but the way to go. Inside the TR element use a data-foobar="baz, whatever" and than use jQuery .data("foobar") to get the value. I'll edit to show you a quick example.

Mr. Jo Over a year ago

Is there a better way to get a relation between the selected file in the frontend and the one stored in the DB when it's not safe using an encrypted file id (Primary Key)?

Roko C. Buljan Over a year ago

@Mr.Jo why not? It's just a value - and it's usually done like that. Validation should be server-side. If I send a POST request towards your server you should know in advance if I'm allowed to download a specific item ID.

Twisty · Accepted Answer · 2020-06-05 17:02:23Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related