不刷新的模式表单提交

Question

我有一个模式窗口，当我想添加一个新的项目到我的仪表板时弹出。我已经让它与jquery post一起工作了，但是我不能阻止它刷新。我想做的是在项目被添加到数据库之后，显示一条成功消息并在几秒钟后关闭模式窗口，而不是刷新页面（模式的父页面）。

这是我的modal

<div class="modal fade" id="add-project-dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
        <h4 class="modal-title" id="myModalLabel">Add a new Project</h4>
        </div>
        <div class="modal-body">
            <h3>New Project:</h3>
            <form class="form-horizontal" id="add-project-form" action="/projects/add" method="POST">
        <fieldset>
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="name">Project Name</label>
          <div class="col-md-4">
          <input id="name" name="name" type="text" placeholder="" class="form-control input-md">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="description">Project Description</label>
          <div class="col-md-4">
          <input id="description" name="description" type="text" placeholder="" class="form-control input-md">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="project_state">Project State</label>
          <div class="col-md-4">
          <input id="project_state" name="project_state" type="text" placeholder="" class="form-control input-md">

          </div>
        </div>

        </fieldset>
                            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                <button id="add-btn" class="btn" type="submit">Add</button>
                     </div>

            </form>
        </div>


</div>

这是我的project-dashboard.js

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()
           }
           });
        });
   });
 }

我的views.py

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

我试过删除self.redirect('/projects')，但是这只会将我带到一个空白页，即/projects/add（即表单中的操作）。

Answer 1

这里有一个片段，不仅用于关闭没有页面刷新的模式，而且在按enter键时，它将提交模式并关闭而不刷新

我在我的网站上设置了它，在这里我可以有多个modals和一些modals处理提交的数据，有些则没有。我所做的是为每个处理的modals创建一个唯一的ID。例如在我的网页中：

HTML（模式页脚）：

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) //custom validation dont copy
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

正如您所看到的，这个提交执行处理，这就是为什么我有这个jQuery用于这个模式。现在假设我在这个网页中有另一个模式，但是没有执行任何处理，而且由于一个模式一次打开，我在一个全局php/js脚本中放了另一个$(document).ready()，所有页面都会得到这个模式的close按钮，我给这个模式的close按钮一个名为：".modal-close"的类：

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery（包括global.inc）：

  $(document).ready(function(){
         // Allow enter key to trigger a particular class button 
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });

现在，如果你遵循这些步骤，你应该不会得到任何页面刷新你的任何情态动词。

Answer 2

编辑：经过一些调试后，答案是使用正确的id和javascript代码的正确放置，如注释所示。

首先，刷新很容易避免，只需确保防止默认事件运行；因为您使用的是jQuery，我建议您执行return false来结束函数since it both 'prevents default' and 'stops propagation'。

因此，首先应该检查javascript代码是否正在运行，并且在执行过程中没有出现错误。如果一切正常，最糟糕的情况是没有实际添加项目（服务器端错误），但页面应该而不是刷新。

您的服务器端代码与刷新无关（如果它被正确劫持的话），所以响应并不重要，我实际上会返回新项目的id（这样您就可以为新创建的项目或类似的东西提供链接），但是我偏离了。。。

Answer 3

问题是您在AddProject函数中添加了.ready(foo)处理程序。我假设在调用AddProject时加载该文档。

另一个问题是，在HTML中，表单的id是add-project-form，因此应该$("#add-project-form")，而不是$("#submit")。

$(document).ready(function () {
   $("#add-project-form").submit(function(event){
       event.preventDefault();
       $.ajax({
           url: "/projects/add",
           type:"POST",
           data:
           {
            'name': $('#name').val(),
            'description': $('#description').val(),
            'project_state': $('#project_state').val()
           }
           });
        });
   });
});

将ready处理程序带到AddProject函数之外，它应该可以工作（添加了submit处理程序）。