Form submit stops working in Rails 3 app with inclusion of Bootstrap

Question

I have a simple_form in a Rails 3 application that works fine if I do not include Bootstrap, but when I add bootstrap, the submit button seems to do nothing. The only thing showing up in the Firebug console when click it is:

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

My contact partial looks like:

<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-->

My layout is as follows:

<!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>

It appears that bootstrap is causing the issue because I took out <%= javascript_include_tag "application" %> and replaced it with a jquery and bootstrap CDN and experienced the same results, but when I remove bootstrap, it works as expected.

I was experiencing the same problem with form_for before using simple_form. I also believe I followed the bootstrap directions by simple_form.

If there are additional files that may help to clarify the problem, please let me know and I'll be happy to post them.

Am I missing something simple?

Thanks!

Answer 1

Change <%= form.button :submit, :class => "btn-primary", :value => "Send Message" %> to

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

Also remove these

<%= 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" %>`

and include these files in application.js file as

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

Bootstrap should appear after Jquery is included. You might want to use gem to include bootstrap in your app. If you want to use it from CDN make sure that bootstrap.js is loaded before calling any functions of bootstrap

Form submit stops working in Rails 3 app with inclusion of Bootstrap

Question

1 answers

solution1
1 2013-02-20 19:06:09

Form submit stops working in Rails 3 app with inclusion of Bootstrap

Question

1 answers

solution1 1 2013-02-20 19:06:09

solution1
1 2013-02-20 19:06:09