0

In my code Ive got an iteration, which outputs <tr> elements with regarding content. Table elements in HTML are pretty limited so you cant wrap <a href="">s around them. Insted there is a workaround in jquery/or whatever JS you are using like

  $("tr[data-link]").on("click", function() {
    window.location = $(this).parent().data("link");
  });

which can be used to turn <tr> into clickable elements which open up links. However this does not work for turbo frame links. If i use something like

<tr data-link="<%= project_path(@project) %>"
  data-turbo-frame="project_sidebar">
...

it just opens up the link .. as expected, because window.location does exactly this.

I tried stuff like Turbo.visit($(this).parent().data("link")); in my js as well which don't work at all.

Is there a way to tell the <tr> to open up a turbo frame via js instead of being a "real" link?

GabrielTheCoder
  • 88
  • 9
  • 1
    Try using CSS properties `display: table;` `display: table-row;` `display: table-cell;` You can make anything behave like a table element. So you can use straight links. – Maxence Sep 05 '22 at 16:07
  • interesting approach. I never thought of it that way to be honest. that would solve a lot of problems but I was too lazy to refactor all the tables of my app to be divs or sth. will try it out now. – GabrielTheCoder Sep 05 '22 at 16:23
  • If you're up for re-doing the html, then I suggest doing it the modern way, with css grid. – Les Nightingill Sep 05 '22 at 17:36

0 Answers0