【问题标题】:Why isn't my modal working in rails? Using a partial为什么我的模态不在 Rails 中工作?使用部分
【发布时间】:2018-04-25 01:09:37
【问题描述】:

我的模态部分保存在shared/_task_modal 中,如下,Bootstrap 文档页面上的示例:

<div id="task_modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我正在使用这个 js 保存为tasks/show.js.erb

$('.modal-body').html('<%= escape_javascript(render :partial => 'shared/task_modal'%>');
$('.modal-header').remove();

链接助手如下&lt;%= link_to task.title, "#taskModal", "data-toggle" =&gt; "modal" %&gt;

为什么这不起作用?

编辑:我也在应用程序布局中呈现它:&lt;%= render "shared/task_modal" %&gt;

EDIT_2:这是我的 Application.js。加载顺序错了吗?

//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

【问题讨论】:

  • 我们需要更多信息来回答这个问题。首先,这不是 JS。向我们展示实际的 JS、项目树等。
  • @MichaelElliott 我的错。忘了包括它。
  • 尝试更改此$('.modal-body').html("&lt;%= escape_javascript(render :partial =&gt; 'shared/task_modal'%&gt;");
  • 注意双引号
  • @DeepakMahakale 这也没有解决。

标签: javascript css ruby-on-rails modal-dialog


【解决方案1】:
<%= link_to task.title, 'javascript:void(0)', "data-toggle"=> "modal", "data-target"=> "#task_modal"  %>

show.js.erb

$('.modal-body').html("<%= j render 'shared/task_modal'%>");

【讨论】:

  • 没用...这是我在地址栏中得到的链接http://localhost:3000/?data-target=%23taskModal&amp;data-toggle=modal
  • @waynard 试试这个:- &lt;%= link_to task.title, 'javascript:void(0)', "data-toggle" =&gt; "modal", 'data-target' =&gt; '#taskModal' %&gt;,请查看更新后的答案。
  • @waynard 就我查看您的模态而言,它一直在给 &lt;div id="task_modal"..&gt; 所以在您链接时,您还应该使用与 "data-target"=&gt; "#task_modal" 相同的 id 并确保在 show.js.erb 中呈现正确div
  • @waynard 您还面临这个问题吗?如果对您有帮助,请随时接受/支持未来的答案。请让我知道以获得进一步的指导。
  • @waynard 如果对你有帮助,你能接受/支持答案吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-11-08
  • 2017-05-25
  • 1970-01-01
  • 1970-01-01
  • 2012-03-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多