我正在嘗試將數(shù)據(jù)從我的數(shù)據(jù)庫傳遞到模態(tài)表單中。此模式的目的是讓用戶可以在數(shù)據(jù)庫中編輯他們的數(shù)據(jù)，然后保存對所述數(shù)據(jù)的更改。我已經(jīng)在 YouTube 上嘗試了許多教程，并使用諸如通過 Ajax 和 Bootstrap Modal Event Listener & Ajax 和 jQuery Click 函數(shù)等方法閱讀了本網(wǎng)站上以前的回復，但由于我對這些編程語言缺乏經(jīng)驗，我還沒有理解為示例與我的項目大不相同。以下是我的表單代碼以及數(shù)據(jù)庫中的表用于打開模態(tài)的按鈕： <a class="badge badge-success p-2" role="button" data-toggle="modal" data-target="#editPostModal">Edit</a> 模態(tài)：<div class="modal fade" id="editPostModal" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Update Post</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form action="editdata.inc.php" method="POST" enctype="multipart/form-data"> // PHP File I would like to use to run a possible "update" query <div class="modal-body"> <div class="form-group"> <input type="text" name="themeContent" class="form-control" placeholder = "Enter theme"/> </div> <div class="form-group"> <input type="text" name="visualIdeaContent" class="form-control" placeholder = "Enter idea"/> </div> <div class="form-group"> <input type="text" name="captionContent" class="form-control" value="<?= $captionContent; ?>" placeholder = "Insert caption"/> </div>總而言之，我希望模態(tài)能夠：1) 打開并顯示與特定用戶 ID 相關(guān)的數(shù)據(jù)庫中的數(shù)據(jù)2) 單擊“保存更改”按鈕時，可以保存對該數(shù)據(jù)所做的任何更改。3) 更新數(shù)據(jù)庫中保存的數(shù)據(jù)。這是我的 CRUD 應用程序的最后一部分，因為我已經(jīng)掌握了其他三個功能。感謝我能得到的任何幫助。
2 回答
繁華開滿天機
TA貢獻1816條經(jīng)驗 獲得超4個贊
您需要 2 個控制器方法：
public function respondData($id)
{
//you can ever check if id exist here or if exist at all and
//throw any exeptions if not exist, this is just example
if($checkUser->exist($id))
{
$userData = array('id' => '1, 'name' => 'Name');
return json_encode($data);
}
throw new \Exeption('User does not exist');
}
public function saveData()
{
if($_POST)
{
if(($checkUser->exist($_POST['id'])))
{
//get value from POST and check and update
return true; // or message and parse it if it was ajax request
}
}
throw new \Exeption('Method not allowed');
}
JQUERY：您需要從您的用戶那里獲取數(shù)據(jù)并將其綁定到模態(tài)您可以這樣做：添加data-user到您的按鈕或鏈接和其他方法來觸發(fā)模態(tài)打開：
$(document).on('click', '#your-link', function () {
var data = $(this).data('user');
$.post({
url: 'url_to_first_action' + '?id=' + data,
data: data,
success: function(data){
//here you parse JSON ARRAY to your fields
},
});
});
現(xiàn)在，在用戶將數(shù)據(jù)提交給第二個操作后，您可以使用直接的 POST 請求或使用 ajax 進行序列化（）發(fā)布。
江戶川亂折騰
TA貢獻1851條經(jīng)驗 獲得超5個贊
所以在修改了以前的代碼之后，我得到了這個工作。
我的表：
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Theme</th>
<th>Visual Idea</th>
<th>Caption</th>
<th>Date</th>
<th>Visual</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$table = mysqli_query($conn ,'SELECT * FROM content');
while($row = mysqli_fetch_array($table)){ ?>
<tr id="<?php echo $row['uidContent']; ?>">
<td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>
<td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>
<td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>
<td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>
<td width="200" data-target="visualContent"><img id="imgsrc" src="<?php echo $row['visualContent']; ?>"width="200"/></td>
<td style = "display:none" width="100" data-target="linkContent"><?php echo $row['linkContent']; ?></td>
<td width="170">
<a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" target="_blank">Link</a>
<a class="badge badge-success p-2" href="#" data-role="update" data-id="<?php echo $row['uidContent'] ;?>">Edit</a>
<a class="badge badge-danger p-2" role="button" href="action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
</td>
</tr>
<?php }
?>
</tbody>
</table>
劇本：
<script>
$(document).ready(function(){
// Gets values in input fields
$(document).on('click','a[data-role=update]',function(){
var id = $(this).data('id');
var themeContent = $('#'+id).children('td[data-target=themeContent]').text();
var visualIdeaContent = $('#'+id).children('td[data-target=visualIdeaContent]').text();
var captionContent = $('#'+id).children('td[data-target=captionContent]').text();
var linkContent = $('#'+id).children('td[data-target=linkContent]').text();
var dateContent = $('#'+id).children('td[data-target=dateContent]').text();
var visualContent = $('#'+id).children('td[data-target=visualContent]').text();
$('#themeContent').val(themeContent);
$('#visualIdeaContent').val(visualIdeaContent);
$('#captionContent').val(captionContent);
$('#dateContent').val(dateContent);
$('#linkContent').val(linkContent);
$('#visualContent').val(visualContent);
$('#uidContent').val(id);
$('#updatePostModal').modal('toggle');
});
});
</script>
唯一的問題是我沒有讓圖像路徑在表單中顯示為縮略圖，但我會通過研究自己弄清楚。我的代碼很丑，但在這一點上，我更關(guān)心功能。謝謝大家。
- 2 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消