這是一個使用 jQuery、阿賈克斯、菲律賓比索、MySQL 和 HTML 的注釋系統。當我單擊“編輯”按鈕時，它顯示MySQL表第一行的注釋，而不是我選擇的行。但是，一旦我編輯它，它確實會更正正確的行。我無法找到顯示要編輯的行的注釋的方法。我可以在文本區域中顯示行的正確comment_id，但它會在文本區域中顯示第一行的注釋。下面是測試用例代碼：MySQL表有兩行：comment_id作為主行和文本注釋。我將數據庫命名為：testcaseedit_db，并將表命名為：tbl_comment。索引.php<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?><div id="display_comment"></div><div id="comment_message"></div><div id="display_edit"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function() {let count = 0;$(document).on('click change', '.edit, .submit', function(e) { if ($(this).is('.edit')) { var comment_id = $(this).attr("id"); $('#comment_id').val(comment_id); var closestDiv = $('button').closest('div.panel'); $('.div.panel').not(closestDiv.next('.div.panel')).hide(); closestDiv.next('div.panel').slideToggle(100); var commentEdit = $('#display_comment').find('#editable').html(); ++count; const htmlString = `<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data"> <div class="input-group-prepend"> <textarea name="comment" id="comment${count}" class="form-control" rows="30" cols="160"> ${commentEdit} ${comment_id} </textarea> </div> <div class="input-group-prepend"> <input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" /> <input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" /> </div> </form>`; $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString); }
1 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
解決方案如下：
在 fetch.php 文件中，我將每個變量的 id 制作成一個數組，如下所示：
<button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'" id[2]="'.$row["comment"].'">Edit</button>
在索引.php文件中，我按如下方式獲取每個變量的值：
var comment_id = $(this).attr("id[1]");
$('#comment_id').val(comment_id);
var comment = $(this).attr("id[2]");
$('#comment').val(comment);
然后我在文本區域內顯示注釋變量，如下所示：
<textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120">${comment}</textarea>
以下是索引.php和提取.php的完整代碼。我離開了編輯.php原封不動：
索引.php
<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?>
<div id="display_comment"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
let count = 0;
$(document).on('click change', '.edit, .submit', function(e) {
if ($(this).is('.edit')) {
var comment_id = $(this).attr("id[1]");
$('#comment_id').val(comment_id);
var comment = $(this).attr("id[2]");
$('#comment').val(comment);
var closestDiv = $('button').closest('div.panel');
$('div.panel').not(closestDiv.next('div.panel')).hide();
closestDiv.next('div.panel').slideToggle(100);
++count;
const htmlString =
`<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">
<div class="input-group-prepend">
<textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120">
${comment}
</textarea>
</div>
<div class="input-group-prepend">
<input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />
<input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />
</div>
</form>`;
$('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);
} else if ($(this).is('.submit')) {
$.ajax({
url:"edit.php",
method:"POST",
data: new FormData(this),
contentType: false,
processData: false,
success:function(data)
{
if(data.error != '') {
$('#comment_form')[0].reset();
$('#comment_id').val(comment_id);
$('#comment').val(comment);
}
}
});
location.reload();
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
// Fetch comment
function load_comment(){
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#display_comment').html(data);
}
})
};
load_comment();
// End of (document).ready(function){}
});
</script>
</body>
</html>
獲取.php
<?php
$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');
$query = "
SELECT * FROM tbl_comment WHERE comment_id = comment_id
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row) {
$output .= '
<div class="panel panel-default">
<div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>
<div class="panel-body"><b> Comment: </b> <br> '.$row["comment"].' </div>
<div class="panel-footer" align="right">
<button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'" id[2]="'.$row["comment"].'">Edit</button>
</div>
</div>
';
}
echo $output;
?>
- 1 回答
- 0 關注
- 79 瀏覽
添加回答
舉報
0/150
提交
取消