Question

当我们点击导航栏中的按钮时，我想在bootstrap模式上显示登录表单。这是我的代码

这是我的new.js.erb

$("#myModal").before("<%= escape_javascript(render "new", :formats => [:html]) %>");
$("#myModal").modal('show');

这是我的_top_nav.html.erb

<li><%= link_to 'LOGIN', new_user_session_path, remote: true %></li>

这是我的_new.js.erb

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal   
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby= "myModalLabel" aria-hidden="true" id="login">
<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">Modal title</h4>
  </div>
  <div class="modal-body">
   <div class="container">
    <div class="well">
 <div class="row">
       <div class="col-lg-10">
      <%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), html: { class: 'form-horizontal', role: 'form' }) do |f| %>
      <h1 id="h1id">Member Login</h1>
     <legend>
     <h4>If you are not a member yet please become a member <%= link_to 'here', new_user_registration_path %> to Sign In</h4></legend>
    <%= f.input :email, :required => false, :autofocus => true, placeholder: ' Email', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'}  %>

    <%= f.input :password, :required => false, placeholder: 'Password', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'}  %>
    <%= f.button :submit, "Sign in", style:"margin-left:17%", class:"btn btn-primary"  %>

<% end %>
   </div>
   <div class="col-lg-2">
     <%= image_tag('logolatinfoods-01.png', size: '300x70', class: 'logo-style') %>
   </div> 
  </div>
 </div>
 </div>

  </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><!-- /.modal-content -->

我无法理解我在哪里犯错误.Ajax调用正在运行但模态没有显示。我是ajax的新手。任何人都可以解释这里出了什么问题。

Answer 1

_new.js.erb应该是_new.html.erb

如何使用ajax在bootstrap模式上呈现部分

1 个答案: