表单提交在包含Bootstrap的Rails3应用程序中停止工作

Question

我在Rails3应用程序中有一个simple_form，如果不包含Bootstrap就可以正常工作，但是当我添加bootstrap时，submit按钮似乎什么也不做。单击时，Firebug控制台中显示的唯一内容是：

Empty string passed to getElementById().
elem = document.getElementById( match[2] );

我的联系人部分如下所示：

<div class="slide" id="contact" data-slide="6" data-stellar-background-ratio="0.5">
      <div id="contactText">
         <div id="contactHeader">
            Contact Us
         </div>
      <%= simple_form_for @message, :url => contact_path, :html => {:class => "form-horizontal"} do |form| %>
         <%= form.input :name %>
         <%= form.input :email %>
         <%= form.input :subject %>
         <%= form.input :body, as: 'text'%>
         <%= form.button :submit, :class => "btn-primary", :value => "Send Message" %>
      <% end %>
      </div> <!-- end contactText --> 
</div> <!--end contact-->

我的布局如下：

<!DOCTYPE html>
<html>
<head>
   <title>Test App</title>

   <%= stylesheet_link_tag    "application", :media => "all" %>    
   <%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Oxygen", :rel => "stylesheet", :type => "text/css" %>
   <%= stylesheet_link_tag    "custom.css", :media => "all" %>
   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "my.js" %> 
   <%= javascript_include_tag "jquery.stellar.min.js" %>
   <%= javascript_include_tag "waypoints.min.js" %>
   <%= javascript_include_tag "jquery.easing.1.3.js" %>
   <%= csrf_meta_tags %>
</head>
<body>
   <%= yield %>
</body>
</html>

似乎是bootstrap导致了这个问题，因为我取出了<%= javascript_include_tag "application" %>并将其替换为jquery和bootstrap CDN，并经历了相同的结果，但当我删除bootstrap时，它按预期工作。

在使用simple_form之前，我在使用form_for时也遇到了同样的问题。我也相信我遵循了simple_form的引导说明。

如果有其他文件可以帮助澄清这个问题，请让我知道，我很乐意将它们张贴出来。

我错过了什么简单的东西吗？

谢谢!

Answer 1

将<%= form.button :submit, :class => "btn-primary", :value => "Send Message" %>更改为

<%= form.submit "send message", :class => "btn-primary"%>

同时删除这些

<%= javascript_include_tag "my.js" %> 
<%= javascript_include_tag "jquery.stellar.min.js" %>
<%= javascript_include_tag "waypoints.min.js" %>
<%= javascript_include_tag "jquery.easing.1.3.js" %>`

并在application.js文件中包含这些文件，如下所示

//= require jquery
//= require jquery_ujs
//= require "my.js"
//= require "jquery.stellar.min.js"
//= require "waypoints.min.js"
//= require "jquery.easing.1.3.js"

Bootstrap应该出现在包含Jquery之后。您可能希望使用gem在您的应用程序中包含bootstrap。如果您想在CDN中使用它，请确保在调用引导程序的任何函数之前加载了bootstrap.js