Each offer of @offers has id and url. When the user clicks on one of the divs, the url of the offer whose id matches the id of the div should open:
@offers.each do |offer|
<div id=< %=offer.id %>> ... </div>
<% end %>
When the user clicks on one of the divs, I want to send him to the url which corresponds to the id of the offer. How do I do this with jquery or coffeescript?
$( ".id_of_offer").click ->
<<< send user to url of offer >>>
If you really just want to link a div to another page, you should simply warp a HTML hyper link around it. It's the easiest method. Since HTML 5 you are allowed to wrap a block element with a link.
<% @offers.each do |offer| %>
<%= link_to(offer), id: 'offer-links' do %>
<div id=<%= offer.id %>> ... </div>
<% end %>
<% end %>
If you want to perform more things in your JavaScript and not just linking, I would still wrap the div into a link and prevent the default action in JavaScript of the link. An advantage of this is, that the website is still working properly, even the user has deactivated JavaScript.
$('#offer-links').click ->
# some other stuff to do..
true
You should also keep in mind, that if you are using Turbolinks you should register this event after the page:load event or it won't work.
With jquery it would be something like
$(".id_of_offer").click(function(){
window.open($(this).attr("href"));
});
for an <a class="id_of_offer" href="url-of-offer"> - just as example as it wouldn't be necessary to attach an event handler for click events on an anchor-tag that actually has the url as href value.
Question is how you relate the offer id and url - are there any links on the page or is the url stored elsewhere? Just not sure about this part of your question: "the url of the offer whose id matches the id of the div".
You can store the url as data-attribute on the div, e.g. like that:
<div id="id_of_offer" data-url="url_of_offer>..</div>
Then it works like that:
$("#id_of_offer").click(function(){
window.open($(this).data("url"));
});
for opening the url in a new tab. If you want to open the url in the current window, it'd be location.href = $(this).data("url");
Update: As mentioned in the comment, the ids will get created on the fly. Therefore this could be adjusted by e.g. setting a class="offer" to each div and change the jquery to
$(".offer").click(function(){
window.open($(this).data("url"));
});
Reference: http://api.jquery.com/data/
window.open($(this).attr("href")); because it's already the default behaviour of a link to follow the link if you click on it.
target="_blank", because if the user has disabled JavaScript :-)