非常简短,这是我在 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函数,因为这不太可能是问题所在。
*$("#myTable").load("mypage.php #myTable");*
注意:仅在添加表加载后,问题才出现。 $("#myTable").load("mypage.php #myTable");
提交后,如果没有重新加载表,提交总是可以工作,只是该表不能实时显示更改,而我需要执行F5 ...这不是计划。
在加载表之后,再次按下按钮时,什么都没有发生,除了我的成功消息消失了。
在此阶段,我需要按两次按钮。只有第二次按下提交后,Ajax才能执行,表显示创建的新项目。 此行为对于所有下一个提交都是一致的。全部仅在第二次提交后执行。
在这里我需要一些帮助。发生什么事了?
我只想重新加载myPage.php的一部分,所以只重载整个表#myTable或整个div #items,以及我在myPage.php中具有的所有验证功能 我不想在process.php中重新创建完整表并通过POST发送它,正如我在其他论坛中看到的一些建议一样。
答案 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 ...因此,即使覆盖了您的提交按钮,它也会始终绑定到该函数。