Rails App with Bootstrap Modal View包含表单，提交和消失模态视图，无需重新加载页面 [英] Rails App with Bootstrap Modal View containing form, submit and disappear modal view without reloading page

问题描述

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

I have a rails app which presents a form for visitors in a modal view. When the submit button is clicked, I want the form to submit and the modal view to disappear without reloading the page behind it. I've tried binding the modal view's dismissal to the form's submit function in javascript, but it's not working correctly. I'm a javascript newbie, so I might not have scripted this correctly. Here's what I have:

<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函数没有关闭模态视图。该功能出了什么问题？

My javascript function isn't closing the modal view. What's wrong with the function?

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

EDIT: Updated the javascript function, still not working correctly

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

EDIT 2: Turns out javascript function isn't being called at all, if that's any help.

推荐答案

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

close() is not a jQuery method and that is not how the Bootstrap modal library works. Also, the submit binding should be changed to be bound so that things inserted into the DOM after the binding has been setup.

你应该把你的功能改成这样的东西：

You should probably change your function to something like this:

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

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

In addition, be sure that you have loaded in jQuery and the Bootstrap modal script files prior to this function.

这篇关于Rails App with Bootstrap Modal View包含表单，提交和消失模态视图，无需重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！