0

I want to get a data value from the clicked td, which opens a modal with the informations of the user. When I select all users, everything works fine.. But when I want to search a specific user (table is not displayed until you search for a user), the modal shows not the right data..

I created a JS array with the usernames and put it in my data value. The innerHTML from the column is the first- and last name of the user.

The problem is that when I click on the name the modal shows the information from the FIRST user in my array (grouped by lastname ASC)

I'm using the DataTables plugin. Here's a short example of my drawCallback function:

"drawCallback": function(settings) {
  var api = this.api();
  var rows = api.rows({
    page: 'current'
  }).nodes();
  var last = null;

  api.column(0, {
    page: 'current'
  }).data().each(function(group, i) {
    if (last !== group) {
      var groupName = api.row(i).data();
      $(rows).eq(i).before(
         '<tr class="group"><td style="font-weight: bold;" data-value="'+groupName[0]+'" data-toggle="modal" data-target="#profileModal" class="tdPerson" colspan="1">'+group+'</td><td colspan="5"></td></tr>'
      );

      last = group;
    }
  });
}

Here's my AJAX request:

$('.table').on('click', '.tdPerson', function(event) {
  id = $(this).attr('data-value');
  $.ajax({
    url: "getData.php",
    data: {
      type: "getPersonModal",
      data: id
    },
    type: "POST",
    success: function(data) {
      $('#profileModalContent').html(data);

    }
  });
});
Mert Silva
  • 29
  • 6
  • There doesn't appear to be an element with the class `tdPerson` in the HTML you're creating. – Rory McCrossan Feb 26 '19 at 14:34
  • @RoryMcCrossan Sorry, my fault.. updated the post above.. – Mert Silva Feb 26 '19 at 14:37
  • Thanks. In that case what you have should work. Try `console.log(id)` and see what the console shows. Also note that using `data()` is a better idea that `attr()`, ie. `$(this).data('value')`, but that won't be affecting the outcome – Rory McCrossan Feb 26 '19 at 14:38
  • It works, wenn I select all users in the table. But when I just want to search one specific user, the data-value is always the first username in my array.. – Mert Silva Feb 26 '19 at 14:41
  • Always look at the *rendered* HTML (right click, view source) to see what it's doing (or inspect element). In this case, this looks suspicious: `data-value="'+groupName[0]+'"` – freedomn-m Feb 26 '19 at 14:42
  • 1
    Possible duplicate of [How to display a confirmation Modal with columns data on button click using Datatables](https://stackoverflow.com/questions/54673651/how-to-display-a-confirmation-modal-with-columns-data-on-button-click-using-data) –  Feb 26 '19 at 14:42
  • @freedomn-m My console shows the username which is always the first user in my array. – Mert Silva Feb 26 '19 at 14:46
  • @ygorbunkov nope.. thats another issue he had. also he just wanted an alert to be displayed. I want a modal with all information of the user – Mert Silva Feb 26 '19 at 14:52
  • @MertSilva isn't that the problem as described? – freedomn-m Feb 26 '19 at 14:59
  • @freedomn-m no.. I wish it is.. looked everywhere in the internet but I could'nt find a solution – Mert Silva Feb 26 '19 at 15:05
  • @Mert Silva: Question header states clearly '**confirmation Modal**'. The answer shows solution with alert (rather than modal) for simplicity sake. Capturing the data model of the clicked row is essential part, make up modal instead of alert is not a big deal, whatsoever. –  Feb 26 '19 at 15:12
  • I have answered similar question yet another time (this time calling bootstrap **modal**), you might find it helpful: https://stackoverflow.com/questions/54930978/datatables-show-column-data-in-modal/ –  Mar 01 '19 at 08:32

0 Answers0