我按两次提交后,Ajax可以工作

时间:2018-08-06 03:11:20

标签: javascript php jquery ajax

非常简短,这是我在 myPage.php 中的php代码:

<div class="table-responsive" id="items">
 <table class="table" id="myTable">
  <thead><tr><th>item<th>status<th>options</thead>
   <tbody>
    [...]
    echo "<tr><td>$item<td>$status<td>to-be-added
    [...]
    echo "<tr><td colspan='3'>";
    echo "<form method='post' id='newitem'>";
    echo "<input type='hidden' id='uid' name='uid' value='$uid'>";
    echo "<div><button type='submit' class='btn btn-info' id='submitbtn'>new item</button></div>";
    echo "</form>";
[...]

这是我的 .js 文件Ajax代码:

$(document).ready(function () {
    $('form').submit(function (event) {
        $('#errors').remove(); // remove the error text
        $('#success').remove(); // remove the success text
        var formData = $("#newitem").serialize();
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: formData,
            dataType: 'json',
            encode: true
        })
                .done(function (data) {
                    console.log(data);
                    if (!data.success) {
                        $('form').append('<div id="errors" class="alert alert-warning"></div>');
                        if (data.errors.validitem) {
                            $('#errors').append('<p>' + data.errors.validitem + '</p>');
                        }
                    } else {
                        $('#addresses').append('<div id="success" class="alert alert-success">' + data.message + '</div>');
                        $("#myTable").load("mypage.php #myTable");
                    }
                })
                .fail(function (data) {
                    console.log(data);
                });
        event.preventDefault();
    });
});

我没有显示process.php函数,因为这不太可能是问题所在。

  1. 当我第一次加载页面并按提交时,会发生以下情况:
    • 通过ajax创建新项目
    • 表中填充了不刷新页面但使用装入选项*$("#myTable").load("mypage.php #myTable");*
    • 的新条目
    • 最后,一切都按预期进行!

注意:仅在添加表加载后,问题才出现。 $("#myTable").load("mypage.php #myTable"); 提交后,如果没有重新加载表,提交总是可以工作,只是该表不能实时显示更改,而我需要执行F5 ...这不是计划。

  1. 在加载表之后,再次按下按钮时,什么都没有发生,除了我的成功消息消失了。

  2. 在此阶段,我需要按两次按钮。只有第二次按下提交后,Ajax才能执行,表显示创建的新项目。 此行为对于所有下一个提交都是一致的。全部仅在第二次提交后执行。

在这里我需要一些帮助。发生什么事了?

我只想重新加载myPage.php的一部分,所以只重载整个表#myTable或整个div #items,以及我在myPage.php中具有的所有验证功能 我不想在process.php中重新创建完整表并通过POST发送它,正如我在其他论坛中看到的一些建议一样。

1 个答案:

答案 0 :(得分:1)

问题在这里:$("#myTable").load("mypage.php #myTable");

mypage.php是您的主页。然后加载一次。然后,在表内部,使用该.load()覆盖所有内容。哪个不好。

然后您有了一个全新的表,其中没有任何处理程序绑定到“提交”按钮。因此,单击提交按钮(第二次)时,将使用<form>元素的“正常行为”提交表单...并且页面已完全重新加载。

作为一种可能的解决方案,我会在.load()上使用form ...,而不是table,如下所示:

$("#newitem").load("mypage.php #newitem");

但是您应该尝试$("#newitem").reset()并删除#error#success ...而不是.load()


编辑
第二节:

尝试$(document).on("submit", "form", function (event) {
而不是$('form').submit(function (event) {

也就是delegation ...因此,即使覆盖了您的提交按钮,它也会始终绑定到该函数。