rails 4 bootstrap 3 ajax模式

Posted 2023-02-22

【中文标题】rails 4 bootstrap 3 ajax模式

【英文标题】：rails 4 bootstrap 3 ajax modal

【发布时间】：2014-04-04 07:12:14

【问题描述】：

我正忙于学习 Rails 4，我想在用户单击链接时显示引导弹出模式，当模式打开时，它需要显示与该特定记录相关的信息。 这是我到目前为止所做的，只是没有显示实际的模态弹出窗口，但确实传递了正确的参数。

index.html.erb 页面有：

<%= link_to "view", work_path(w), remote: true, :"data-toggle" => 'modal', :"data-target" => '#myModal' %>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

我也有作品/_modal.html.erb：

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;          </button>
    <h4 class="modal-title" id="myModalLabel"></h4>
  </div>
  <div class="modal-body">
  <%= @work.name %>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>

也是一个工作控制器：

    def show
    @work = Work.find(params[:id])
    if request.xhr?
    respond_to do |format|
        format.html render :partial => 'modal'
        format.json head :ok
    end
end
end

最后是作品/show.js.erb：

$("#myModal").html("<%= escape_javascript(render 'modal') %>");

我希望我在这里遗漏了一些简单的东西。在控制台中我可以看到以下消息，所以我知道它正在返回正确的信息，但不幸的是它没有显示模态。：

Started GET "/works/8" for 127.0.0.1 at 2014-03-03 09:31:12 +0000
Processing by WorksController#show as JS
Parameters: "id"=>"8"
Work Load (0.2ms)  SELECT  "works".* FROM "works"  WHERE "works"."id" = ? LIMIT 1  [["id", 8]]
Rendered works/_modal.html.erb (4.9ms)
Completed 200 OK in 8ms (Views: 6.3ms | ActiveRecord: 0.2ms)

非常感谢您对此的任何帮助。

【问题讨论】：

你添加了一个 id 为“myModal”的 div 吗？

是的，在 index.html.erb 中有一个 id="myModal" 的 div

【参考方案1】：

尝试另一种方式。这样，我们将使用显式 javascript 命令显示模态弹出窗口。

在 index.html.erb 中

<%= link_to "view", work_path(w), remote: true, class: 'static-popup-link'%>

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">Loading...</div>

在 application.js 中

$(document).ready(function() 

  var clickOnPopupLink = function()
    $('body').on('click', '.static-popup-link', function()
      $('#myModal').modal('show');
    );
  

  clickOnPopupLink();

);

在控制器中

def show
  @work = Work.find(params[:id])
end

在 show.js.erb 中

$('#myModal').html("<%= j render("/works/modal")%>")

【讨论】：

按照同样的思路，我做了一个要点来展示如何使用 bootstrap3-dialog 为所有“确认”链接执行此操作。 gist.github.com/Genkilabs/bdcc5f62c5b46a8e0904

确保将单引号嵌套在双引号中：$('#myModal').html("<%= j render('/works/modal')%>")

@bachan-smruty 知道为什么这会显示模态淡出而不是模态对话框吗？我可以从 network/rails 控制台看到所有资产都在渲染，但我只是淡出而没有可见的形式？

【参考方案2】：

还需要显示模态，在show.js.erb中添加$('#myModal').modal('show')

$("#myModal").html("<%= escape_javascript(render 'modal') %>");
$('#myModal').modal('show')