How to open a bootstrap modal using rails link_tag and remote: true

Question

I am usinge rails 5.0.2 My view page code is:

 <%= link_to  'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>

But its did not open the modal, after making this call as remote: true Is their any other way round thanks in advance

Answer 1

As per the description mentioned in the post and code posted, it seems like you have made jquery selector in the html tag

<%= link_to  'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>

Modify it to

<%= link_to  'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => 'files' %>

In the above code the files is the id of the modal so no need to append "#" in front of it.

Answer 2

1- Add a generic modal to your layout with i.e #defaultModal id. 2- In your controller js.erb response file, find that modal and replace its content with your html content and show modal.

js.erb file

$('#defaultModal .modal-footer').remove();
$('#defaultModal .modal-body').remove();
$('#defaultModal form').remove();
$('#dynamic-content').html('<%= escape_javascript(render :template => "#{target}", :formats => [:html], :handlers => [:erb]) %>'); //this contains both footer and body
$('#defaultModal .modal-header h4').text('<%= @title %>');
$('.other-modals').modal('hide');
$('#defaultModal').modal('show');

default modal html file

<div class="modal fade" id="defaultModal"   aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="default-modal-header">.</h4>
      </div>
      <div id="dynamic-content">
        <div id="default-modal-body" class="modal-body">
          <p class='loading'>Loading...</p>
        </div>
        <div id="default-modal-footer" class="modal-footer">
          <%= link_to 'Close', "#", "data-dismiss" => "modal", :class => "btn", "aria-hidden" => true %>
        </div>
      </div>
    </div>
  </div>
</div>