[英]pass an item id to from card to modal
so i have a 3 cards that has its value taken from database i want to get the id of the particular card that was clicked and send it to modal so i can echo it in the modal所以我有 3 张卡片,其值取自数据库
i tried sending it to the button trigger as data-id=<?php $card_id?> but that doesn't seem to work我尝试将其作为 data-id=<?php $card_id?> 发送到按钮触发器,但这似乎不起作用
php & mysql codes to fetch from database
<div class="container">
<div class="title">
<h5><?php echo $card_id; ?></h5> <h1><?php echo $card_title; ?></h1>
<div class="body">
<?php echo $card_name; ?>
<button type="button" data-toggle="modal" data-target="#myModal" name="button" data></button>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1><?php echo $card_id; ?></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You could look into using Ajax for this.您可以考虑为此使用 Ajax。
Keep data-id="<?php echo $card_id; ?>"
in your button.在您的按钮中保留data-id="<?php echo $card_id; ?>"
。
Create a php page to process the ID to be echoed:创建一个 php 页面来处理要回显的 ID:
if ($_POST['cardid']) {
$id = $_POST['cardid'];
echo $id;
}
Use a modal event to push the ID to your modal's body using a class declaration:通过 class 声明,使用模态事件将 ID 推送到模态体的主体:
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function(e){
var cardid = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: 'record.php',
data: 'cardid='+ cardid,
success: function(data){
$('.fetched-data').html(data);
}
});
});
});
Put the class declaration in your modal body where you want the ID to show:将 class 声明放在您希望 ID 显示的模态正文中:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1 class="fetched-data"></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.