带有 Bootstrap 模态视图的 Rails 应用程序，包含表单、提交和消失模态视图，无需重新加载页面

Posted 2023-05-09

【中文标题】带有 Bootstrap 模态视图的 Rails 应用程序，包含表单、提交和消失模态视图，无需重新加载页面

【英文标题】：Rails App with Bootstrap Modal View containing form, submit and disappear modal view without reloading page

【发布时间】：2012-12-14 18:21:46

【问题描述】：

我有一个 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函数，还是不能正常工作

EDIT 2：结果证明根本没有调用 javascript 函数，如果这有帮助的话。

【问题讨论】：

您有什么具体问题吗？你的脚本现在做什么？

现在脚本不会关闭模式视图，而是提交表单并将数据输入数据库。我想知道需要改变什么。

【参考方案1】：

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

你应该把你的函数改成这样：

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

另外，请确保您已经在此函数之前加载了 jQuery 和 Bootstrap 模态脚本文件。

【讨论】：

感谢您的意见！这些事情都没有使模态视图消失。有什么想法吗？

好的。您的问题可能是 $(".new_user") 实际上并未映射到相关表单。您确定 rails 表单生成器会将该类添加到表单中吗？

好的。更重要的问题是您的 submit 处理程序是否真的被调用了。是吗？如果不是，那么 rails.js 可能会使用 data-remote="true" 终止提交事件。

如果您将其更改为$(".new_user").submit(function()console.log("foobar");); foobar 是否会显示在控制台中？

好的。很确定我知道问题所在。 Bootstrap 模态的工作方式是移除模态并将其重新插入 DOM。所以这意味着事件处理程序没有绑定。我将修改答案以进行修复。