How to access row data from (bootstrap) modal confirmation button

gerker

Hi,

http://live.datatables.net/liwigaji/1/

I have rows with a button, on click a modal opens, and asks for confirmation.
I cannot access the row data of the clicked row when handling the click event on the confirmation button. Want to extract a certain column (uniqid) identifying the clicked row uniquely (to use in an ajax request later).

Using jQuery's parents() function does not get me anywhere. Customizing the modal on the first click, and retrieving the data again by id later is very awkward.

Then tried Datatable's Select extension, which gets me closer, but behaves unexpectedly to me.

Explicitly invoking select() on the row on clicking 'click'-button is no more available when later handling the confirmation button click.

Explicit select() after hitting 'click' button:

$('#example tbody').on('click', 'button', function() {
  table.row( $(this).parents('tr') ).select();

This would work above (after 'click' button), but not after click on confirmation button (#send):

$('#send').on('click', function() {
  var data2 = $.map( table.rows( { selected: true } ).data(), function(item) {
         console.log("uniqid of selectd item: ", item['uniqid']);
     });

But it works, when I also select any other row. In other words: When I select Bernard, but use 'click'-button of Tiger, I can access the correct (Tiger's) row with:

$.map( table.rows( { selected: true } ).data()

But not, when I do not also select Bernard's row. Selecting Tiger's row and click Tiger's buttons won't help, though.

When calling deselect() prio to select() on the clicked (via button 'click') row, no data are found from the modal..

Gerhard

allan

It doesn't seem to me that you actually want to select a row, so using Select would be the wrong thing to do here.

var data = table.row( $(this).parents('tr') ).data();

from your code is what I would suggest, and that appears to work - the data for the modal reflects what is in the row's data in your example.

I'm not entirely clear what the issue is I'm afraid?

Allan

gerker

Hi Allan,
using the row api was my first idea, but it always returns undefined (not an array), also when using the link posted.

console.log("parent data: ", table.row( $(this).parents('tr') ).data());

After I couldn't get the row data using the row api as suggested, using select was my second idea (because my real webapp uses select with checkboxes). But, I came to like it, because the user of the webapp might have selected some rows, changed his mind, and then clicked on the button of a different row. What she then sees is: a few rows selected (highlighted) and a modal talking about a different row. I tried to only select the row the modal is talking about.

Gerhard

kthorngren

var data = table.row( $(this).parents('tr') ).data();

In the #send click event this has no context with the table which is why its undefined. Since data.uniqid appears to be unique for each row you can use that value from the modal to find the row data in the table. You can use row-selector as a function to return only the row that matches the data, for example:

     var data =   table.row( function ( idx, data, node ) {
      return data.uniqid === uniq ?
        true : false;
      } )
      .data();

Here is the updated example:
http://live.datatables.net/towobaco/1/edit

Kevin

gerker

Hi Kevin,

works!

Updated the demo to also correct my mistakes:
http://live.datatables.net/meyijiwu/1

Both variants are working now:

Table-button click updates modal's body <p> element having id="uniq" with the unique value of column's "UniqID". Made it hidden by adding style="display: none", as this unique value is technical and should be hidden from the user. This value then is extracted by the second click to the modal's confirmation button, your code snippet can find the complete row data using this value.

Alternatively using the select extension also works. Clicking the table-button now first calls deselect() to make a clean slate, then select() on exclusively $(this) row. I simply did that wrong:

wrong:
table.row( $(this).parents('tr') ).data();
correct:
table.row( $(this) ).data();

Then the click event on the modal's confirmation button is able to find the one and only selected row:

$map( table.rows( {selected: true} ).data(), function(item) {
console.log(item);
});

Thank you so much, Alan and Kevin, for your kind and unbelievable quick response!

Gerhard

gerker

Sorry,

got the link to the updated demo wrong:

http://live.datatables.net/meyiyiwu/1/edit

allan

Excellent - delighted to be of help.

Allan