Hi Below code gives me the list of messages in table row format and i want to make each row as clickable. I have tried every suggestion in SO but could not make it work.
As i could not make whole tr
clickable, i made i.reason
field as clickable as temprorary solution.
<% if @notifyCount > 0 %>
<table class="table table-hover table-condensed">
<% @notify.each do |i| %>
<tr class="notifyTable" id= "<%=i.id %>">
<td class="myWidth concat">
<%= image_tag "#{i.incident_image}", style: "height:45px; width:45px; float:left; margin: 0 8px 0 0" %> <b> <%= i.sender.first_name + ' ' + i.sender.last_name %> </b> <br>
<div> <%= link_to truncate(i.reason.capitalize, length: 50), message_member_path(id: i.id), style: "text-decoration:none" %> </div>
</td>
</tr>
<%end%>
</table>
<%else%>
<p style="opacity:0.7;text-align:center;margin-top:5px"> No Unread Messages ...</p>
<%end%>
JS
You'll have to use Javascript to make this work
Javascript (and JQuery) basically works on the front-end of the browser (inside the DOM
- Document Object Model ) to bind events to elements on the page.
Here's how you'd made a div "clickable" using JQuery:
#app/assets/javascripts/application.js
$(document).on("click", ".div", function() {
// Your Action Here
});
--
In regards to the specifics of your question, you may need to look at using the following code:
#app/assets/javascripts/application.js
$(document).on("click", ".notifyTable", function(){
alert("Row is clicked");
});
This will allow you to capture the click event. If you want to then perform things with that click, you'll be best adding data
attributes to your row
, like so:
<tr class="notifyTable" id= "<%=i.id %>" data-link="http://google.com">
This would allow you to do this:
#app/assets/javascripts/application.js
$(document).on("click", ".notifyTable", function(){
window.location.href = $(this).data("link")
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.