How to make a Div with a Rails Link clickable?

Question

I have a large div:

.limeskin:hover {
  background: #eee;
  cursor: pointer;
  display: block;
}

that I want to be clickable. Because I'm using Rails I need to have a Rails link be clickable: For example

<%= link_to 'Edit Your Email Address', edit_user_path %>

I'm struggling to this.

Here is the whole block:

<% @user.posts.each do |post| %>
     <div class="lists">
      <ol class="limeposts">
       <li>
        <div class="limeskin">
          <div class="limebox">
            <div class="limecost">
              <b>Price:</b>
              <%= number_to_currency(post.price, :unit => "R") %><br>
              [...]
<% end %>

Any simple legal workable answers?

Thanks

Solution 1

link_to can accept a block:

<%= link_to root_path do %>
  <div>Hey!</div>
<% end %>

This will surround the div with <a> tags.

Documentation: http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to

Or if you have a big div and want to make it "clickable", using jQuery:

# html.erb
<div class="limeskin">
  <div class="limebox">
    <div class="limecost">
      <b>Price:</b>
      <%= number_to_currency(post.price, :unit => "R") %><br>
      #[...]
    </div>
  </div>
</div>

# jQuery.js
$('.limeskin').click( function(event) {
  var clicked_div = $(this);
  # do stuff with the event object and 'this' which 
  # represent the element you just clicked on
});

jsFiddle: http://jsfiddle.net/Lxw34w5o/1/

Solution 2

Using Link_to as below would be sufficient even when you have a big block including multiple tags:

<%= link_to desired_path do %>
    <div class="linkable">
        <another div>
             ... some other tags
        </another div>
    </div>
<% end %>

and I recommend you to use a different background color for mouse over events because it shows the viewer that it's a link!

In you .css file:

.linkable:hover{
    background-color: red;

}

Solution 3

Use javascript (I recommend jQuery) to make the action actually happen and CSS hover selector to modify the div background and the cursor (to change the cursor from an arrow to a hand).

Comments

[Erin Walker]

Hi thanks, it makes the limeface and limcost div content clickable, but nothing else. I want the whole block (see style sheet added) for limeskin to be clickable.

[MrYoshiji]

Okay give me a sec I'll post a solution with jQuery

[Abbey Jackson]

When I do this in my index.html.erb file the row actually just doesn't display at all. Do you know what could cause that?

[Aboozar Rajabi]

@AbbeyJackson Check your code and be sure to use <%= not <%

[Abbey Jackson]

Yes I copied it directly from here to be sure

[Aboozar Rajabi]

@AbbeyJackson Check your code and mostly your CSS. Check it without the link_to and also use Inspect Element in your browser to see what is happening.