We've moved discussions to Discord

How to Create Clickable items?

Brandon B.
This is a confusing question.  'data-link' is just an attribute, what action are you trying to make happen? 
Dan Weaver
Maybe you're referring to Jumpstart Pros use of Stimulus? You can read the Stimulus docs here. It's really simple once you understand the basic principles.
NG DAVID
Clickable items means I click on an item on a list, it will take me to the "Show" screen.  In the past, I do this with JavaScript "clickable-link" in app/assets/Javascript/application.js with the following

$(document).ready(function(){
  $(".clickable-link").on('click', function(e){
    url = $(this).attr('data-link-path');
    window.location = url;
  });
});

and in my table list item, I have my code like this.  

<li class="clickable-link" data-link-path="<%= user_path(@user) %>">
  ...
</li>

This approach does not work in Rails 6 with JumpstartPro template, not sure if it is due to webpack used in Rails 6.

Any suggestion doing this clickable-item feature in Jumpstart Pro template ? 

Murray Bryant
As mentioned above easy to do with stimulus. If you don't get your answer from the docs try this video of Chris's

https://gorails.com/episodes/stimulus-js-framework-introduction?autoplay=1

also 

Your code here is not working because $() is jquery, which is no longer included by default in rails 6

You can add Jquery into the template but stimulus is I feel simpler to use once you get how it works
Murray Bryant
Also

does this not achieve what you want? no javascript needed

<li>
<%= link_to  user_path(@user) do%>
...
<% end %>
</li>

NG DAVID
I mean clickable item, not button.  

After I imported jQuery into Rails 6 using Webpacker, those jQuery code is working fine now.

Thanks for all those suggestions.  
Dan Weaver
Murray Bryant Agree. This does look like an overcomplicated version of a basic link tag! I guess OP might have some extra stuff going on that requires this extra complexity.
NG DAVID
May I make it clear.  It is a clickable item, NOT a link or a button.  
Murray Bryant
No worries, I was just suggesting that if you are just going to a url on a click then by using an <a></a> tag around the items ( which is what using do in the link_to does)  it makes them open the url on a click.

If you are doing further logic with your click then yes your way is the way to go.


Chris Oliver
One good example of what  NG DAVID is talking about is in the admin, you want to be able to click a table row anywhere to view the item. 

You can't wrap a table row with an <a> tag since it's not valid HTML, so you have to implement some Javascript as described above. Kind of annoying, but it works. 
NG DAVID
Thanks. 

Notifications
You’re not receiving notifications from this thread.