Get $50+ off for Black Friday!

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.