Ruby on Rails - Show the same modal with different content

Question

I have a home page with a list of software in a table.

With this link I open my softwares pages in modals:

<% = link_to software_path (software), remote: true do %> ... <% end%>

I created a script allowing me to open my modals when I click on td with class .clickable and not open modals when I click on a td with class .no-click.

$(".clickable").click(function(e) {
  if (!$(e.target).hasClass('no-click')) {
      $('#software-modal').modal('show');
    }
});

structure :

_software.html.erb open _software_modal.html.erb

Problem: When I try to open my modals via the script, it's always the same modal that opens. That is, the modal of software 1 opens when I click on software 2, software 3, ... but no problem when I just use the link.

So I have a problem with id or something like that in my script ...

Can you help me ?

EDIT 1: With the response of VAD I tried to search the id with data-id.

_software.html.erb

<tr class="clickable" data-id="<%= software.id %>">
...
</tr>
<div id='software-content'></div>

_software_modal.html.erb

<div id="software-modal" class="modal fade" role="dialog">
...
</div>

show.js.erb

$('#software-content').html("<%= j render 'software_modal', software: @software %>");
$('#software-modal').modal('show');

this show.js.erb allows me to open my modals via example links:

<%= link_to software.name, software_path(software), remote: true,class:"no-click" %>

but not via a clickable table.

So I added a script in _software.html.erb that makes my table clickable:

  $(".clickable[data-id]").click(function(e) {
    if (!$(e.target).hasClass('no-click')) {
      window.location = '/softwares/' + $(this).attr('data-id');
    }
});

I also tried with data-link, ... is there a way to open this window.location in a modal (like the link)? I searched for several hours yesterday but I did not find anything ..

EDIT 2

following the response of @VAD with render layout: false, we can put:

class ApplicationController < ActionController::Base
   layout proc{|c| c.request.xhr? ? false : "application" }
end

which allows to have a false render for the js and true render for html. And so to keep my html pages with my starting layout.

Thx @dogenpunk Render without layout when format is JS (needs drying)

Answer 1

You need to have different modals for every place you want to show the modal from. Like for software1 you need to show the modal with content relative to this particular object. For software2 you'll need to show the same model but with a brand new content relative to software2

Another option (and the better one) is that you may have one single modal for every Software object but by some event (for example actually showing the modal) you'll update the modal content with the data specific for this particular Software object. You may use some controller action for that

Additional

Try to pass software id as data parameters in your clickable elements and then to update your modal content with ajax and like that

<div class = 'clickable' data-id = "#{software.id}">
</div>

$(".clickable").click(function(e) {
  if (!$(e.target).hasClass('no-click')) {
      $.get('/softwares/' + $(this).attr('data_id'), function(data) {
        $('#software-modal body').html(data);
      }); 
      $('#software-modal').modal('show');
    }
});

Of course I can't give precise code so you'll need to adjust it according to you current setup

Update

The idea is that you have show action in softwares_controller.rb which eventually renders the content for your modals:

def show
  // some code you need
  render layout: false
end

It will render show.html.erb view. In that view you should keep the html for your modal content. Notice that the action will render that view without layout. You need this because you will soon take this html and will put it into the modal, so you don't need any extra html like the layout.

So, you have an action which render the modal content for every software object by its id.

Now you need to put it into the modal.

You have clickable elements in your markup. You attach correspondent software ids to them as data-id. Then in your jquery code you use these ids to construct a url like this:

'/softwares/' + $(this).attr('data_id')

This url will lead to your show action in softwares_controller.rb. So by clicking on one of clickable elements you take the id, generate the url with it, send request to the url, get the response (the modal content) and then put it into the modal like this:

$.get('/softwares/' + $(this).attr('data_id'), function(data) {
  $('#software-modal body').html(data);
}); 

Then you show the modal with already updated content:

$('#software-modal').modal('show');