title: Rails App with Bootstrap Modal View containing form, submit and disappear modal view without reloading page
body: <p>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:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("document").on("submit", ".new_user", function() {
          $('.signup').modal("close");
      });
  &lt;/script&gt;
  &lt;fieldset&gt;
  
        &lt;!-- The sign up modal view --&gt;
         &lt;div id="signup" class="modal hide fade in" style="display: none;"&gt;  
          &lt;% @user = User.new %&gt;
          &lt;%= form_for(@user, :remote =&gt; true) do |f| %&gt;
          &lt;div class="modal-header"&gt;  
            &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;  
            &lt;h3&gt;Want to be notified when preorders start? Fill out this form!&lt;/h3&gt;  
          &lt;/div&gt;  
          &lt;div class="modal-body"&gt;  
              &lt;div class="field"&gt;
                &lt;%= f.label :email %&gt;
                &lt;%= f.text_field :email, :class =&gt; 'modal_input'%&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                &lt;%= f.label :website %&gt;
                &lt;%= f.text_field :website, :class =&gt; 'modal_input'%&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                &lt;%= f.label :projects, "Projects you've worked on"  %&gt;
                &lt;%= f.text_area :projects, :size =&gt; "43x10", :class =&gt; 'modal_input' %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;  
          &lt;button type="submit" class="btn btn-success"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;  
         &lt;/div&gt;  
        &lt;% end %&gt;
  
  
         &lt;!-- The modal view is triggered here --&gt;
          &lt;a data-toggle="modal" href="#signup" class="btn btn-primary
          btn-large btn-signup"&gt;Sign up&lt;/a&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;  
          &lt;script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"&gt;&lt;/script&gt;
    &lt;/fieldset&gt;
  </code></pre>
  
  <p>My javascript function isn't closing the modal view. What's wrong with the function?</p>
  
  <p><strong>EDIT</strong>: Updated the javascript function, still not working correctly</p>
  
  <p><strong>EDIT 2</strong>: Turns out javascript function isn't being called at all, if that's any help.</p>