Rails在bootstrap模态框中呈现模板

Question

我尝试将rails tempalte渲染为bootstrap模式......

JS代码如下所示：

$(document).ready(function(){
$(".signup").click(function(){

  var text = '<%= render :template => "users/signup"%>';

  $(".modal-body").html(text);
  $("#modalBox").modal('show');
});
});

这样的模板：

<div class="row">
  <div class="col-md-12">
<h2><%= t "user.signup" %></h2>
<br>
<%= form_for User.new, :html => {:multipart => true, :class => "form-horizontal", :role => "form", :id => "signupform"}, :as => :user, :method => :post, :url => {} do |f| %>

    <div class="form-group">
      <%= f.label :email, :class => "col-sm-2 control-label", :for => "email" %>
      <div class="col-sm-10">
        <%= f.email_field :email, :class => "form-control", :placeholder => "Email", :id => "email", :placeholder => :email %>
      </div>
    </div>
    <div class="form-group">
      <%= f.label :firstname, :class => "col-sm-2 control-label" %>
      <div class="col-md-10 col-sm-10">
        <%= f.text_field :firstname, :class => "form-control", :placeholder => :firstname %>
      </div>
    </div>

结果是这样的：

问题是什么

_nav.html.erb

<div class="row bp-startsite-nav-row">
<nav class="navbar navbar-inverse navbar-fixed-top bp-nav-navbar-inverse">
<!--Titel / Icon-->
<div class="col-md-4">
  <div>
    <%= link_to "ingenium", {:controller => :startsites}, :class => "navbar-brand"%>
  </div>
</div>
<!--Titel / Icon End-->
<!--Search-->
<div class="col-md-4">
  <div id="bp-startsite-imaginary_container">
    <div class="input-group bp-startsite-stylish-input-group">
      <input type="text" class="form-control" placeholder="<%= t "navigation.search_field"%>"/>
              <span class="input-group-addon">
                <button type="submit">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </span>
    </div>
  </div>
</div>
<!--Search End-->
<!--Buttons-->
<div class="col-md-4">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bp-nav-bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sprache <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <%= render :partial =>"shared/languageChooser" %>
            </ul>
          </li>
          <button type="button" class="btn btn-default navbar-btn bp-nav-navbar-btn bp-nav-btn-default"><%= t "start.sign_in" %></button>
          <button type="button" class="btn btn-primary navbar-btn bp-nav-navbar-btn signup"><%= t "start.register" %></button>
          </ul>
        </div>
      </div>
    </nav>
</div>
<!--Buttons End-->
</nav>
</div>


<script>

$(document).ready(function(){
$(".signup").click(function(){

  var text = '<%= render :template => "users/signup"%>';

  $(".modal-body").html(text);
  $("#modalBox").modal('show');
});
 });

 </script>

Answer 1

你必须使用escape_javascript＆amp;＆amp; html_safe

尝试这样：

var text = '<%= escape_javascript(render :template => "users/signup").html_safe %>';