如何在 rails4 link_to 中打开弹出框答案

【问题标题】：how to open popup box in rails4 link_to如何在 rails4 link_to 中打开弹出框
【发布时间】：2015-06-02 12:30:22
【问题描述】：

嗨，我想打开我在视图中给出的弹出框

<%=link_to 'show',edit_interview_round_path(round), :remote => true%>
<div id="popup">
</div>

并写在我的控制器中

def edit
  @interview_round = InterviewRound.where(id: params[:id]).first
  respond_to do |format|
    format.js
  end
end

我正在编辑.js.erb

$("#popup").html('<%= escape_javascript(render 'interview_rounds/form') %>');

在 interviews_rounds/edit 视图中写了这个

<%= render 'form' %>

在 interview_rounds/_form 视图中写了这个

<%= form_for @interview_round do |f| %>

    <div class='modal'>
      <%= f.text_field :name, :class => 'form-control' %>
      <label for='name'>Name</label>
    </div>


    <div class='input-field col s12' >
      <%= f.text_field :question_1, :class => 'form-control' %>
      <label for='name'>Name</label>
    </div>

    <div class='col s12 center-align'>
      <%= button_tag(:class => "btn waves-effect waves-light btn-large custom_btn_gray") do %>
          Submit <i class="mdi-content-send right"></i>
      <% end %>
    </div>

<% end %>

所以现在当我点击显示时，它不会打开弹出窗口，它会在同一页面上显示编辑视图我想在弹出框中显示它，请指导我如何做到这一点。提前致谢！

【问题讨论】：

window.open (<%= edit_interview_round_path(@interview_round) %>, "mywindow","width=600,height=600"); 将此行添加到edit.js.erb
会出现什么错误？
当我单击链接“显示”时，没有任何反应，控制台上也没有错误，在 rails 控制台中，我在 2015 年 6 月开始为 127.0.0.1 获取“/interview_rounds/54/edit” -02 18:10:49 +0530 由 InterviewRoundsController 处理#edit as JS 参数：{"id"=>"54"} InterviewRound 负载 (0.3ms) SELECT interview_rounds.* FROM interview_rounds WHERE interview_rounds.@ 987654330@ = 54 ORDER BY interview_rounds.id ASC LIMIT 1 渲染的 interview_rounds/edit.js.erb (0.4ms) 在 8ms 内完成 200 OK (查看: 5.1ms | ActiveRecord: 0.3ms)
你用什么css来“弹出”？？？你只需要玩弹出 css
谢谢你..我终于明白了

标签： javascript ruby-on-rails ruby-on-rails-4 popupwindow

【解决方案1】：

尝试格式化您的部分渲染代码：

$("#popup").html("<%= j render( :partial => 'interview_rounds/form' ) %>");

看起来您嵌套了单引号，这可能是问题所在。您的代码当前设置为在 id 为 popup 的 div 中的同一页面上呈现部分内容。

如果您想在新窗口中呈现它，请尝试以下操作：

var wind = window.open("", "popupWindow", "width=600,height=600");

wind.document.write("<%= j render( :partial => 'interview_rounds/form' ) %>");

如果表单在 #popup div 中正确呈现，并且您需要模态或叠加效果，您只需将弹出 div 设置为模态即可。

【讨论】：

它在同一页面上呈现表单但不打开弹出框
是的，它正在打开一个新窗口，但我想像 jquery 模态对话框一样在同一个窗口上打开并在模态对话框中显示该编辑表单
那么你只需要使用第一个代码sn-p并设置模态样式。可能也想澄清你的问题。就像@bunty 说的，你只需要使用 CSS 来设置#popup div 的样式。