导轨上的红宝石中的Bootstrap模式不起作用（不显示） [英] Bootstrap modal in ruby on rails not working(not show up)

问题描述

我正在使用rail4和'bootstrap-sass'：'3.3.6'。

I am using rail4 and 'bootstrap-sass':'3.3.6'.

我已按照 https://coderwall.com/p/ej0mhg/open-a-rails-form- with-twitter-bootstrap-modals 和根据重写的部分内容导轨上的ruby中的Bootstrap模式无效。

部分：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

rails console中没有错误。

No errors in rails console.

Chrome检查的回复似乎没问题。

And Responses from chrome inspect seems to be fine.

回复：

$("#myModal").find(".modal-content").html("<div aria-hidden=\'true\' aria-labelledby=\'myModalLabel\' class=\'modal fade\' id=\'myModal\' role=\'dialog\' tabindex=\'-1\'>\n<div class=\'modal-dialog\' role=\'document\'>\n<div class=\'modal-content\'>\n<div class=\'modal-header\'>\n<h3 id=\'myModalLabel\'>Modal header<\/h3>\n<\/div>\n<div class=\'modal-body\'>\n<p>One fine body…<\/p>\n<\/div>\n<div class=\'modal-footer\'>\n<button aria-hidden=\'true\' class=\'btn\' data-dismiss=\'modal\'>Close<\/button>\n<button class=\'btn btn-primary\'>Save changes<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n");
$("#myModal").modal('show');

但是模式没有出现。

其他相关代码：

调用该操作的视图：

%li= link_to 'Add release', new_release_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#myModal'}

new_release.js.erb

new_release.js.erb

$("#myModal").find(".modal-content").html("<%= j (render 'new_release') %>");
$("#myModal").modal('show');

路线：

get "new_release" => 'project#new_release', :as => :new_release

推荐答案

我猜你试图渲染那个模态通过javascript里面的 new_release.js.erb 与

I guess when you try to render that modal via javascript inside new_release.js.erb with

$("#myModal").find(".modal-content")

实际上它没有加载到DOM中，因为未加载部分

actually it's not loaded in DOM as the partial is not loaded

所以不要在你的内部添加整个模态，而是在实际调用的模板文件中保留模型div标签，比如说你的主模板是

So instead of adding whole modal inside you partial keep model div tag inside the template file where you actually calling like lets say your main template is

index.html.erb

index.html.erb

<%= link_to 'Add release', new_release_path, :remote => true %>

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

js.erb内

new_release.js.erb

new_release.js.erb

$("#myModal").find(".modal-content").html("<%= j (render 'new_release') %>");
$("#myModal").modal('show');

_new_release.html.erb

_new_release.html.erb

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>

希望这是有效的，谢谢

这篇关于导轨上的红宝石中的Bootstrap模式不起作用（不显示）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！