Clickable table row that makes request

Questions
1

Hi all,

I am using a popup to display JSON data dynamically in a table. For example:

$$(document).on('popup:opened', '.popup-loadResults', function (e) { 
  app.preloader.show();
  app.request.json('my-URL', function (data) {
    var tableHtml = '';
      for(var i = 0; i < data.length; i+=1){
        tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td></tr>';        
      }    
    $$('.data-table #resultsTable').html(tableHtml);
    app.preloader.hide();
  });  
})

From the above example, each entry in the JSON url is displayed in a table row by a brand field (data[i].brand). I would like to further this by making each row clickable, and once clicked a new json request is created using a field from the original json (data[i].api).

2

this has nothing to do with F7;

...
$$('.data-table #resultsTable tr').on('click', e => {
  // Find here your td and make your request.
})
2 Likes
3

Thanks, I realise now that this actually doesn’t have much to do with Framework7. However thanks for your answer, it definitely helped. I ended up adding an ID to the row when building the table:

tableHtml+= '<tr id="' +data[i].regnumber+ '"> ..

image

I was hoping to get this ID when the row is clicked using:

$$('.data-table #resultsTable tr').on('click', e => {        
    var zaf = $$('.data-table #resultsTable tr').attr("id");
    console.log(zaf);        
  })

It kind of works, but the console keeps logging the ID of the first row regardless of which row is clicked. I think I need to use a loop but I just cant seem to get it working.

4

I finally got this working. I wasn’t too far off :grin:

$$('.data-table #resultsTable tbody tr').on('click', function (e) {
  var zaf = $$(this).closest('tr').attr('id');
  console.log(zaf);        
})
1 Like