javascript - 使用 javascript bootstrap jquery 更新模式
问题描述
我无法使用我想要的数据更新模态...调用它时会弹出模态,但它无法更新字段..
已经尝试了很长时间了,但我是 javascript 的新手。
调用模态:
<a href="" data-toggle="modal" data-target="#myModal" data-foodid="<?=$subject['food_id'];?>" data-food="<?=$food_name;?>" data-name="<?=$name;?>" data-time="<?=$time;?>" data-status="<?=$status;?>><i class="fa fa-eye""><?= $subject['food'] ?></i></a>
模态的
<div class="modal fade hide" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Informasjon om matvare</h5>
</div>
<div class="modal-body">
<label style="font-weight: bold;"><strong>Matvare: </strong></label><span class="food" id="food">ingen?</span></br>
<label><strong>Registrert av </strong></label><span class="modal-name" id="food">ingen?</span> </br>
<label><strong>Registrert dato </strong></label> </br>
<label><strong>Status </strong></label> </br>
<a href="#myModal" type="submit" class="btn btn-sm btn-info editlink">Endre</a>
<a href="#myModal" type="submit" class="btn btn-sm btn-danger deletelink">Slett</a>
<a href="#myModal" type="submit" class="btn btn-sm close" data-dismiss="modal">Lukk</a>
</div>
</div>
</div>
</div>
剧本
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (event) {
//$('#myModal').on('click', function (event) {
var applicant = $(event.relatedTarget);
var foodid = applicant.data('foodid');
var food = applicant.html('food');
var name = applicant.data('name');
var time = applicant.data('time');
var status = applicant.data('status');
var modal = $(this);
alert('hgi');
$('.food').text(food);
modal.find('.food').text('test' + food);
modal.find('.modal-name').text(name);
modal.find('.modal-time').text(time);
modal.find('.modal-status').text(status);
modal.find('.editlink').attr('src', '/admin/food/edit/'+foodid);
modal.find('.deletelink').attr('src', '/admin/food/delete/'+foodid));
});
}
</script>
在标题中
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
解决方案
如果你从控制器中检索数据并且你想用它们填充模态,你可以试试这个代码,因为我过去和你有同样的问题,并以这种方式解决了它。
步骤1:
- 删除模态体中的数据
第2步:
- 通过 JS 填充模态:从控制器发出一个事件并将填充模态所需的数据传递给它
<script>
window.addEventListener('openMyModalEvent', event => {
console.log(event.detail.articolo[0]);
//this clean the modal from previous data
$(".modal-body").empty();
// this code populate the modal
$(".modal-body").append('<label>'+event.detail.variable_name.field+'</label>'); // you have to use $ ('. modal-body'). append (); for each data you want to switch to modal.
$("#myModal").modal('show');
})
</script>
第 3 步:
- 在 modal-body 之后添加以下代码:
<div class="modal-footer>
<a href="#myModal" type="submit" class="btn btn-sm btn-info editlink">Endre</a>
<a href="#myModal" type="submit" class="btn btn-sm btn-danger deletelink">Slett</a>
<a href="#myModal" type="submit" class="btn btn-sm close" data-dismiss="modal">Lukk</a>
</div>
推荐阅读
- swift - 无法通过 CoreBluetooth (macos Swift) 发现蓝牙鼠标和键盘
- twitter-bootstrap-3 - 更改轮播列?
- ember.js - ember-custom-actions 插件 urlForCustomAction 不起作用
- sql - 从两个日期在sql中生成日期
- c# - 避免直接使用数字
- ios - 在 OC 项目中引入 Swift 导致编译错误
- android - Xamarin Forms:让控件在地图顶部重叠
- java - 创建文件中定义的名称为“userController”的 bean 时出错
- reactjs - React Context API - 元素类型无效
- java - 用于侦听是否有其他 Java 程序正在运行的 Java 程序