以下 HTML 代码使用 PHP 中的 while 循环进行echo
ed,该循环在从数据库获取数据后添加一个列表项。
PHP:
echo '
<li>
<div class="collapsible-header">
<div class = "left">
<div class = "issueStatusIcon" style = "background-color:'.$smallCircleColor.';">'.$smallMsg.'</div>
<span class = "issueTitle" style = "font-family: robotoBold">'.$issueTitle.'</span>
</div>
<div class = "issueButtonsGroup">
<form id = "archiveIssueForm'.$i.'" issue-name = "'.$issueTitle.'" action = "archiveIssue.php">
<input type = "hidden" value = "'.$issueID.'" name = "issueID"/>
</form>
<a class = "right archiveIconButton" onclick = "ajaxIssueArchive('.$i.')" href = "#">
<i class="material-icons black-text issueOptions archiveIcon">archive</i>
</a>
<a class = "right"><i class="material-icons black-text issueOptions">edit</i></a>
</div>
</div>
</li>
';
请注意光标位于用于存档列表项的存档按钮上。该按钮的class
是archiveIconButton
(您可以在上面的代码中找到它)。单击按钮时,archiveIssueForm
通过 AJAX 提交(每个表单都有一个附加到其 id 的唯一标识符变量 $i
)。
以下是 JQuery AJAX 代码:
JQuery:
<script>
function ajaxIssueArchive($num){
$.ajax({
type: "post",
url: "archiveIssue.php",
data: $('#archiveIssueForm' + $num).serialize(),
success: function(data){
$fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name");
$toastText = $fetchIssueName + " has been archived";
Materialize.toast($toastText, 3000);
$('#archiveIssueForm' + $num).html(data);
}
});
}
</script>
归档任何列表项后,它将从数据库中删除。我想更新包含这些列表项的 ul 元素,以便在 AJAX 表单提交后不会显示被删除的列表项。
假设ul的id为issueListUL
。
我当前得到的是 li 项中显示的 html 页面的完整代码。我肯定做错了什么,任何帮助将不胜感激!
最佳答案
我能够通过以下方式解决这个问题,问题中的 JQuery 脚本应该这样更改:
JQuery:
<script>
function ajaxIssueArchive($num){
$.ajax({
type: "post",
url: "archiveIssue.php",
data: $('#archiveIssueForm' + $num).serialize(),
success: function(data){
//assigning the updated ul's html to a variable
$afterIssueArchival = $(data).find("#issueListContainer").html();
//toast
$fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name");
$toastText = $fetchIssueName + " has been archived";
Materialize.toast($toastText, 3000);
//updation of ul's html, ID of the ul which contains all the list items is assumed to be 'listContainer'
$("#issueListContainer").html($afterIssueArchival);
}
});
}
</script>
更新元素的 html 时,只需从 ajax 代码中的 data
属性中提取元素更新后的 html 代码 (如上面的代码所示) 并用它更新现有元素的 html!
希望能帮到和我有同样问题的人! :D
关于javascript - ajax 调用后更新动态生成的列表项(使用 PHP 生成),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38859259/