Issue with interactive rows in a table ( Rails Version 4 )

I am encountering an issue with a table that is linked to a customer show page

_table.html.erb

<table class="table table-striped table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th width="50"><%= sort_link @q, :id, "ID"%></th>
      <th width="50"><%= sort_link @q, :health_status_ok, "Status"%></th>
      <th width="50"><%= sort_link @q, :first_name, "First Name"%></th>
      <th width="50"><%= sort_link @q, :last_name, "Last Name"%></th>
      <th>Tickets Enabled</th>
      <th>Notes</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <% @customers.each do |customer| %>
      <a href="<%= customer_path(customer) %>">
        <tr data-link="<%= customer_path(customer) %>">
          <td>&nbsp;&nbsp;&nbsp;<%= customer.id %></td>
          <td>&nbsp;&nbsp;<i class="<%= status_code_css(customer.health_status_ok)%>"></i></td>
          <td><%= customer.first_name  %></td>
          <td><%= customer.last_name  %></td>
          <%= ( render 'customers/auto_ticket_enable', customer: customer ) if AUTHORIZED_USERS.include?(session[:current_user_login])%>
          <td><%= customer.notes.nil? ? "" : customer.notes  %></td>
          <td><%= link_to "View", customer_path(customer), class: 'btn center-block' %></td>
        </tr>
      </a>
    <% end %>
  </tbody>
</table>

Upon rendering the page, I noticed that the row is not clickable as intended. The generated source code for one instance appears like this:

...
<tbody>
      <a href="/customers/11 ">
        <tr data-link="/customers/11">
          <td>&nbsp;&nbsp;&nbsp;11</td>
          <td>&nbsp;&nbsp;<i class="fa fa-check-circle fa-2x status-ok"></i></td>
          <td>Some</td>
          <td>Dude</td>
            <td style="color:green"><strong>Enabled</strong></td>

          <td>123 Anyplace you want. </td>
          <td><a class="btn center-block" href="/customers/11">View</a></td>
        </tr>
      </a>
...

I am seeking guidance on how to resolve the issue of making the entire row clickable. Can someone please advise me on what I might be missing?

Answer №1

I am skeptical of the idea that you can place a <tr> within an <a> tag.

It appears that you are utilizing Bootstrap. Check out this StackOverflow thread for guidance on how to make a table row clickable using jQuery, which comes with Bootstrap by default.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prioritizing the validation of form controls takes precedence over redirecting to a different URL in Angular 2

Within an HTML page, there is a form with validation and an anchor tag as shown below: <form #loginForm="ngForm" (ngSubmit)="login()" novalidate> <div class="form-group"> <label for="email">Email</label> <i ...

How do I utilize AJAX and HTML to invoke a RESTful web service in Java?

How to call a RESTful webservice in Java using HTML Ajax? I have created a simple webservice in Java and want to POST data into a database using HTML Ajax by calling a Java webservice in Eclipse. However, I encountered an error in my Java program. How can ...

Implement horizontal scrolling feature to code container

One cool feature on my blog is the codebox where I can insert snippets of HTML, CSS, and Javascript codes. Here's an example of how my CSS code looks: .post blockquote { background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tr ...

The content div in CSS is causing the menu div to be displaced

I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...

Leveraging the local variables within a function in conjunction with the setTimeout method

Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local ...

Maintaining image ratio on the entire screen

I am in search of a way to create a webpage that includes the following elements from top to bottom: Full-screen width image/background-image (maintaining aspect ratio) Navigation bar (aligned at the top right of the image) Some text Another full-screen ...

Jumping Sticky Table Headers

Looking for a solution to prevent the table header from moving when scrolling through the data: tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sti ...

Utilizing variables upon the page being refreshed

Is there a way to retain certain data even when the page is refreshed? I have some values stored in an array and would like to keep them without losing them upon refreshing. ...

JavaScript's Math.round function does not always produce accurate results

After adding the specified line within the function, the code seems to encounter issues. parseLocalFloatCnt: num = Math.round(num*1.2); Is there a solution available for this problem? Your help is much appreciated. <!DOCTYPE html> <html> < ...

Update the class of the panel immediately prior to a click event

Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...

Can the arrangement of icons/buttons on the JW Player control bar be customized?

I am trying to customize the skin of my JWplayer like this: This is my current progress: I have been researching how to rearrange the order of icon / button on the controlbar. According to the jwplayer documentation, the buttons on the controlbar are div ...

What are the steps to achieve a smooth transition from a background-image to transparency?

Take a look at this related image: The goal is to replicate the design shown on the right side of the image. However, there's also a parent container with its own background image, as opposed to a solid color. Any guidance on how to achieve this? U ...

Make sure the top edge of your Bootstrap 4 dropdown menu is perfectly aligned with the bottom edge of your

Trying to make a Bootstrap 4 navbar dropdown display right below the navigation bar, but it consistently shows slightly above the bottom edge of the navbar. Is there a way to make this happen without fixing the height of the navbar and using margin-top fo ...

Trigger javascript function with a button click

Is there a way to trigger a JavaScript function from an HTML button that is not functioning properly? REVISED To see the issue in action, please visit this jsfiddle link: http://jsfiddle.net/winresh24/Sq7hg/341/ <button onclick="myFunction()">Try i ...

The HTML code on the page does not match the code I see when inspecting it

I need to extract the cost savings and frequency of interruptions information from the table on https://aws.amazon.com/ec2/spot/instance-advisor/ using Python. After inspecting the website using Chrome's 'Inspect' feature, I discovered that ...

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

Mandate that users select from the available place autocomplete suggestions exclusively

I have integrated the "Places" Google API to enable address autocomplete in an input field on my website. However, since the service is limited to a specific area, I have implemented an autocomplete filter. The issue I'm facing is that users are stil ...

Use Onblur and Onfocus events in an input field that is read-only

Here is an input field: <input class="" type="text" id="Name_11_1" name="Name" value="Your name:"> I would like to modify it as follows: <input class="" type="text" id="Na ...

Incorporate a JSON file into the Webpack output separately from the bundle.js file

Is there a way for my webpack application to read a JSON file at runtime without including it in the bundle.js after packaging? I want the JSON file to be available in the package folder but not bundled with the rest of the code. How can I achieve this? ...

Customizing the active link color in Bootstrap dropdown menus

Is there a way to customize the color and background of an active link in a boostrap's dropdown menu? Despite trying to override bootstrap's @dropdownLinkColorActive and @dropdownLinkBackgroundActive variables, the changes don't seem to tak ...