Question

我有一个rails应用程序，它以模态视图显示访问者的表单。单击提交按钮时，我希望表单提交，模式视图消失而不重新加载它后面的页面。我已尝试将模态视图的解雇绑定到javascript中的表单提交函数，但它无法正常工作。我是一个javascript新手，所以我可能没有正确编写脚本。这就是我所拥有的：

<script type="text/javascript">
    $("document").on("submit", ".new_user", function() {
        $('.signup').modal("close");
    });
</script>
<fieldset>

      <!-- The sign up modal view -->
       <div id="signup" class="modal hide fade in" style="display: none;">  
        <% @user = User.new %>
        <%= form_for(@user, :remote => true) do |f| %>
        <div class="modal-header">  
          <a class="close" data-dismiss="modal">×</a>  
          <h3>Want to be notified when preorders start? Fill out this form!</h3>  
        </div>  
        <div class="modal-body">  
            <div class="field">
              <%= f.label :email %>
              <%= f.text_field :email, :class => 'modal_input'%>
            </div>
            <div class="field">
              <%= f.label :website %>
              <%= f.text_field :website, :class => 'modal_input'%>
            </div>
            <div class="field">
              <%= f.label :projects, "Projects you've worked on"  %>
              <%= f.text_area :projects, :size => "43x10", :class => 'modal_input' %>
            </div>
        </div>
        <div class="modal-footer">  
        <button type="submit" class="btn btn-success">Submit</button>
        </div>  
       </div>  
      <% end %>


       <!-- The modal view is triggered here -->
        <a data-toggle="modal" href="#signup" class="btn btn-primary
        btn-large btn-signup">Sign up</a>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
        <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
  </fieldset>

我的javascript函数没有关闭模态视图。这个功能出了什么问题？

编辑：更新了javascript功能，仍然无法正常工作

编辑2 ：如果有任何帮助的话，根本没有调用javascript函数。

Answer 1

close()不是jQuery方法，而不是Bootstrap模式库的工作方式。此外，应该将提交绑定更改为绑定，以便在设置绑定后将内容插入到DOM中。

您应该将功能更改为：

$(function () {
  $("document").on("submit", ".new_user", function() {
      $('.signup').modal("close");
  });
});

此外，请确保在此函数之前加载了jQuery和Bootstrap模式脚本文件。

Rails App with Bootstrap Modal View包含表单，提交和消失模态视图，无需重新加载页面

1 个答案: