Question

我尝试使用jquery从部分渲染底部模态视图。

我有一个控制器letters_controller.rb，代码如下：

def new
  @letter = Letter.new
  respond_to do |format|
    format.html
    format.js
  end
end

在views/letters.slim我有两个文件：_new.slim：

       .modal-header
         button.close type="button" data-dismiss="modal"
           i.fa.fa-times
       .modal-title
         h4 style='display: inline; margin-right: 15px' Write a letter
       .modal-body
         p lalallala

       .modal-footer
         button type="button" class="btn btn-default" data-dismiss="modal" Сlose
           .modal-dialog style='width: 700px'
             .modal-content

和new.js.erb

$("#email-modal").html("<%= escape_javascript(render 'letters/new') %>");

在通话视图中，我有一个按钮= link_to new_letter_path, {:id => 'contact-us', :remote => true }

同样在调用视图中，我有一个div，其中应该呈现模态： .modal.fade#email-modal role="dialog" tabindex="-1"

问题在于，点击一个按钮，任何东西都会变灰，但不会出现任何窗口。我查了一下代码，发现jquery没有将_new.slim的代码插入到准备好的div中。可能是什么？感谢名单！

================== 按下按钮的日志（我只留下与那些东西相关的那些）：

I, [2016-10-18T22:31:11.380703 #1]  INFO -- : Started GET "/letters/new" for 172.18.0.4 at 2016-10-18 22:31:11 +0000
I, [2016-10-18T22:31:11.404587 #1]  INFO -- : Processing by LettersController#new as JS
D, [2016-10-18T22:31:11.411518 #1] DEBUG -- :   User Load (1.1ms)  SELECT  "users".* FROM "users" WHERE "users"...
....
I, [2016-10-18T22:31:11.454585 #1]  INFO -- :   Rendered letters/_new.slim (0.1ms)
I, [2016-10-18T22:31:11.459100 #1]  INFO -- :   Rendered letters/new.coffee within layouts/application (6.7ms)
I, [2016-10-18T22:31:11.546124 #1]  INFO -- :   Rendered application/_support_email.slim (0.1ms)

Answer 1

你的_new.slim应该是

#edit-modal.modal.fade aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" 
   .modal-header
     button.close type="button" data-dismiss="modal"
       i.fa.fa-times
   .modal-title
     h4 style='display: inline; margin-right: 15px' Write a letter
   .modal-body
     p lalallala

   .modal-footer
     button type="button" class="btn btn-default" data-dismiss="modal" Сlose
       .modal-dialog style='width: 700px'
         .modal-content

你需要在letters.slim中使用div来放置模态内容

<div id="modalDiv"> </div>

然后你的new.js应该呈现部分并触发模式显示

$("#modalDiv").html("<%= escape_javascript(render partial: 'letters/new') %>");
$("#edit-modal").modal("show");

Answer 2

实际上，问题不在于模态，而是在format.js中并在js.erb文件中执行jquery。我问one more question，解决方案是在{ render layout: false, content_type: 'text/javascript' }

之后添加format.js

Rails jquery渲染bootstrap模态

2 个答案: