Question

当我想在仪表板中添加新项目时，我会弹出一个模态窗口。我已经得到它与jquery帖子一起工作但是，我不能阻止它刷新。我想要做的是将项目添加到数据库后，显示成功消息并在几秒钟后关闭模态窗口而不刷新页面（模态的父页面）。

这是我的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

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

另一个问题是，在您的HTML中，表单的标识为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处理程序。）

Answer 2

编辑：经过一些调试后，答案是使用正确的id并正确放置javascript代码，如评论中所述。

对于初学者来说，很容易避免刷新，只需确保阻止默认事件运行;因为您正在使用jQuery，所以我建议您使用return false来结束函数since it both 'prevents default' and 'stops propagation'。

所以你要做的第一件事就是检查你的javascript代码是否实际运行，并且在执行过程中没有犯错。如果一切都很好，最糟糕的情况是项目实际上没有添加（服务器端错误），但页面不刷新。

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

Answer 3

这是一个片段，不仅可以关闭没有页面刷新的模态，但按下输入时会提交模态并关闭而不刷新

我已将它设置在我的网站上，我可以在提交时使用多个模态和一些模态处理数据，而有些则没有。我所做的是为每个进行处理的模态创建一个唯一的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。现在假设我在这个网页中有另一个模态，但没有执行任何处理，因为一次打开一个模态我将另一个$(document).ready()放在一个全局php / js脚本中，所有页面都得到了，我给了模态的关闭按钮一个名为".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');
                    }
                }
         });
    });

现在，如果您按照这些步骤操作，则不应对任何模态进行页面刷新。

模态表单提交没有刷新

3 个答案: