Get data-val in the table using javascript

Question

I'm trying to analyze my code to make it work, but I'm not able to individually get the click on the button through data-val. Whenever I try, when I click it comes all the buttons at the same time. the code is:


    
        
            
                Date
            
            
                File
            
        
    
    
        
            2022-04-07 13:34:10
            
            20220407_10_22_30_L100.SVL
                
            
        
        
            2022-04-07 13:34:16 20220407_10_22_28_L100.CSV
                
            
        
        
            2022-04-07 13:34:41 20220407_11_23_48_R14826.WAV

When clicking on the button Download, I need to call a method, but to be able to call this method, I need to know which button I'm clicking on, that is, the data-val works as if it were my id in this code.

   var sensorDownload = $('.btn-sensor').attr("data-val");
   console.log('SENSOR DOWNLOAD: ' + sensorDownload);
    
   sensorDownload.on('click', function(ev){
        ev.preventDefault();
        console.log('CLICK HERE: ' + ev.target);
   });

My idea is to get it by data-val, but if anyone has a better way to individually get this column so I can pass it via ajax to my method in the backend in php. I would be very grateful if someone could help me with options to do this.

user_519413 · Answer

Your approach seems a little confused. To do what you require you need to select the elements in the DOM. Using an attribute which contains the HTML matching those elements is not how this is done.

Using plain JS, you can use the querySelectorAll() method to retrieve the elements. From there you can use addEventListener() to add an event handler to the buttons. Finally you can get the data-val from the clicked element by using the target property of the event that's passed to the handler as an argument.

Try the following example - note that I removed the data attributes which are no longer needed.

document.querySelectorAll('.ip-table-row .btn-sensor').forEach(el => {
  el.addEventListener('click', function(ev) {
    ev.preventDefault();
    console.log('CLICK HERE: ' + ev.target.dataset.val);
  });
});


  
    
      
        Date
      
      
        File
      
    
  
  
    
      2022-04-07 13:34:10
      
        20220407_10_22_30_L100.SVL
        
      
    
    
      2022-04-07 13:34:16
      20220407_10_22_28_L100.CSV
        
      
    
    
      2022-04-07 13:34:41
      20220407_11_23_48_R14826.WAV

Finally, if you wanted to use jQuery for this then the equivalent logic would be this:

jQuery($ => {
  $('.ip-table-row .btn-sensor').on('click', e => {  
    e.preventDefault();
    console.log('CLICK HERE: ' + $(e.target).data('val'));
  }); 
});

user_14018522 · Answer

Move the .attr("data-val") from your variable and retrieve it in the click handler.

var sensorDownload = $('.btn-sensor');
console.log('SENSOR DOWNLOAD: ' + sensorDownload);

sensorDownload.on('click', function(ev){
    ev.preventDefault();
    
    console.log('CLICK HERE: ' + $(this).attr("data-val"));
});

user_3425506 · Answer

I have modified your code so that it does console.log the data value for the button when you click on a button.

   var sensorDownloads = document.querySelectorAll('.btn-sensor');
    
   for(let i = 0; i < sensorDownloads.length; i++){
     sensorDownloads[i].addEventListener('click', function(event){
       console.log(event.target.dataset.val);
     });
   }


    
        
            
                Date
            
            
                File
            
        
    
    
        
            2022-04-07 13:34:10
            
            20220407_10_22_30_L100.SVL
                
            
        
        
            2022-04-07 13:34:16 20220407_10_22_28_L100.CSV
                
            
        
        
            2022-04-07 13:34:41 20220407_11_23_48_R14826.WAV

user_18771660 · Answer


  test
  
    
    
      
        
          
            Date
          
          
            File
          
        
      
      
        
          2022-04-07 13:34:10
          
            20220407_10_22_30_L100.SVL
            
          
        
        
          2022-04-07 13:34:16
          20220407_10_22_28_L100.CSV
            
          
        
        
          2022-04-07 13:34:41
          20220407_11_23_48_R14826.WAV

Get data-val in the table using javascript

4 Answers