如何使用rails link_tag和remote打开引导程序模式:true

时间:2018-11-20 08:37:54

标签: ruby-on-rails-3 ruby-on-rails-4 ruby-on-rails-5 ruby-on-rails-5.1 ruby-on-rails-5.2

我正在使用Rails 5.0.2 我的查看页面代码是:

 <%= 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' %>

但是在远程调用之后,它没有打开模式:true 他们有其他办法吗?

2 个答案:

答案 0 :(得分:1)

按照帖子中提到的描述和发布的代码,似乎您已经在html标签中创建了jquery选择器

<%= 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' %>

修改为

<%= 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' %>

在上面的代码中,文件是模式的ID,因此无需在其前面附加“#”。

答案 1 :(得分:0)

1-使用#defaultModal ID将通用模态添加到布局中。 2-在控制器js.erb响应文件中,找到该模式,并将其内容替换为html内容并显示模式。

js.erb文件

$('#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');

默认模式HTML文件

<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>