Question

非常简短，这是我在 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函数，因为这不太可能是问题所在。

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

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

在加载表之后，再次按下按钮时，什么都没有发生，除了我的成功消息消失了。
在此阶段，我需要按两次按钮。只有第二次按下提交后，Ajax才能执行，表显示创建的新项目。此行为对于所有下一个提交都是一致的。全部仅在第二次提交后执行。

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

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

Answer 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 ...因此，即使覆盖了您的提交按钮，它也会始终绑定到该函数。

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

1 个答案: