title: Modal Form Submission without refresh
body: <p>I have a modal window that pops up when I want to add a new project to my dashboard. I have gotten it to work with jquery post however, I cannot prevent it from refreshing. What I want to do is after the project is added to the database, show a success message and close the modal window after few seconds and not refresh the page (parent page of modal).</p>
  
  <p>Here is my <code>modal</code></p>
  
  <pre><code>&lt;div class="modal fade" id="add-project-dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add a new Project&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;h3&gt;New Project:&lt;/h3&gt;
              &lt;form class="form-horizontal" id="add-project-form" action="/projects/add" method="POST"&gt;
          &lt;fieldset&gt;
          &lt;!-- Text input--&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="col-md-4 control-label" for="name"&gt;Project Name&lt;/label&gt;
            &lt;div class="col-md-4"&gt;
            &lt;input id="name" name="name" type="text" placeholder="" class="form-control input-md"&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text input--&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="col-md-4 control-label" for="description"&gt;Project Description&lt;/label&gt;
            &lt;div class="col-md-4"&gt;
            &lt;input id="description" name="description" type="text" placeholder="" class="form-control input-md"&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text input--&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="col-md-4 control-label" for="project_state"&gt;Project State&lt;/label&gt;
            &lt;div class="col-md-4"&gt;
            &lt;input id="project_state" name="project_state" type="text" placeholder="" class="form-control input-md"&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;/fieldset&gt;
                              &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
  
                  &lt;button id="add-btn" class="btn" type="submit"&gt;Add&lt;/button&gt;
                       &lt;/div&gt;
  
              &lt;/form&gt;
          &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is my <code>project-dashboard.js</code></p>
  
  <pre><code>AddProject = function(){
    $(document).ready(function() {
     $("#submit").submit(function(event){
         event.preventDefault();
         $.ajax({
             url: "/projects/add",
             type:"POST",
             data:
             {
              'name': $('#name').val(),
              'description': $('#description').val(),
              'project_state': $('#project_state').val()
             }
             });
          });
     });
   }
  </code></pre>
  
  <p>My <code>views.py</code></p>
  
  <pre><code>class AddProject(webapp2.RedirectHandler):
      def get(self):
      template_values = {
          #'greetings': greetings,
          #'url_linktext': url_linktext,
          }
      path = os.path.join(os.path.dirname(__file__), '../templates/project-add.html')
      self.response.write(template.render(path, template_values))
  
  def post(self):
      project = Project()
      project.name = self.request.get('name')
      project.description = self.request.get('description')
      project.project_state = self.request.get('project_state')
      time.sleep(2)
      project.put()
      self.redirect('/projects')
  </code></pre>
  
  <p>I have tried removing the <code>self.redirect('/projects')</code> however that only takes me to a blank page that is <code>/projects/add</code> (that is the action in the form).</p>