无法访问id传递给bootstrap模式 [英] Unable to access id pass to bootstrap modal
本文介绍了无法访问id传递给bootstrap模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用bootstrap模式窗口更新和删除表中的数据。我已经传递了要更新或删除的特定数据的ID。但我无法将该ID访问到模态窗口。以及更新模态调用时它只显示该模态上的一条记录
提前感谢
我尝试过：
< div class = action-buttons greater-125 align = center >
< a href = ＃edit-event-modal >
< / a >
< a < span class =code-attribute> href = ＃ >
< / a >
< a href = ＃del-event-模态 >
< i class =fa fa-times>
< / a >
<！ - < span class =code-comment>< a href =＃myModalclass =btn>删除项目< / a> - >
< / div >
modal.php
<！ - 删除项目模态 - >
< div < span class =code-attribute> id = del-event-modal class = modal fade >
< div class = 模态对话框 >
< div < span class =code-attribute> class = modal-内容 >
< div class = modal-header >
< h4 class = modal-title > 确认< / h4 < span class =code-keyword>>
< / div > <！ - // modal-header - >
< div class = modal-body >
< ; p class < span class =code-keyword> = text-warning > 您要删除此项目吗？< / p > ;
< / div > <！ - < span class =code-keyword> // modal-body - >
< div class = modal-footer >
<！ - - >
< / div > <！ - //模态页脚 - >
< / div > <！ - //模态内容 - >
< / div > <！ - //模态对话 - >
< / div > <！ - // modal - >
<！ - //删除项目模式 - >
<！ - 编辑项目模式 - >
< div id = edit-event-modal class = modal淡出 >
< div class = 模态对话框 >
< div class = modal-content >
< div class = modal-header >
< h4 class = modal-titl e > 编辑项目< / h4 >
< / div > <！ - // modal-header - >
< div class = modal-body >
< div >
< / div >
< / div > <！ - // modal-body - >
< div class = modal-页脚 >
<！ - < span class =code-keyword>
- >
< / div > <！ - //模态页脚 - >
< / div > <！ - //模态内容 - >
< / div > <！ - < span class =code-comment> //模态对话 - >
< / div > <！ - <温泉n class =code-keyword> // modal - >
<！ - //编辑项目模式 - >
$（' ＃del-event-modal'）。on（' show.bs.modal'， function （event）{
var button = $（event.relatedTarget）; // 触发模态的按钮
var recipient = button.data（' id'）; // 从data- * attributes中提取信息
// 如有必要，您可以在此处启动AJAX请求（然后在回调中进行更新）。
// 更新模态的内容。我们在这里使用jQuery，但你可以使用数据绑定库或其他方法。
var modal = $（此）;
modal.find（' .modal-body #id'）。 VAL（接收方）;
$（' ＃del'）。on（ 点击， function （event）{
var x = document .getElementById（ id）。value;
$ .ajax（{
url：' delproject.php'，
类型：' POST'，
数据：{value：x}，
成功：功能（数据）{
< span class =code-keyword> var data = JSON .stringify（data）
alert（ 发送的ID为 + data）;
/ / window.location.href =projects.php;
}
}）;
}）;
}）;
$（' ＃edit-event-modal'）。on（ ' show.bs.modal'， function （e）{
// 获取被点击元素的data-id属性
var bookId = $（e.relatedTarget）.data（' id'）;
// 填充文本框
$（e.currentTarget）.find（' input [name =proid ]'）。val（bookId）;
// var x = document.getElementById （proid）。value; alert（pid+ x）;
/ * < span class =code-comment> $（'＃编辑'）。on（'click'，function（）{
var x = document.getElementById（proid）。value;警报（ PID + X）;
var pnm = document.getElementById（pnm）。value;警报（ PNM + PNM）;
var pcity = document.getElementById（pcity）。value;警报（ pcity + pcity）;
var feature = document.getElementById（p_feature）。value;警报（ 功能 +功能）;
var spec = document.getElementById（p_spec）。value;警报（ 规范 +规范）;
$ .ajax（{
url：'editproject.php'，
type：'POST'，
cache：'false'，
数据：{value：x，pnm：pnm，pcity：pcity，feature：feature，spec：pspec}，
success：function（data）{
var data = JSON.stringify（data ）
// alert（id sent is+ data）;
window.location.href =projects.php;
}
}）;
}）; * /
}）;
解决方案
（< span class =code-string>' ＃del-event-modal'）。on（' show.bs.modal'， function （event）{
var button =
（event.relatedTarget）; // 触发模态的按钮
var recipient = button.data（' id'）; // 从data- *属性中提取信息
// 如有必要，可以在这里发起一个AJAX请求（然后在回调中进行更新）。
// 更新模态的内容。我们在这里使用jQuery，但您可以使用数据绑定库或其他方法。
var modal =
（ this ）;
modal.find（' .modal-body #id'）。 VAL（接收方）;
i want to update and delete the data from table using bootstrap modal window . i have passed id for that particuar data to be updated or delete. but iam not able to access that id into modal window. as well as while update modal call it only show one record on that modal
thanks in advance
What I have tried:
<div class="action-buttons bigger-125" align="center">
<a href="#edit-event-modal">
</a>
<a href="#">
</a>
<a href="#del-event-modal">
</a>
<!--<a href="#myModal" class="btn">Delete Project</a>-->
</div>
modal.php
<!-- Delete Project Modal -->
<div id="del-event-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div><!--//modal-header-->
<div class="modal-body">
<p class="text-warning">Do you want to Delete this project?</p>
</div> <!--//modal-body-->
<div class="modal-footer">
<!-- -->
</div> <!--//Modal-footer -->
</div><!--//modal-content-->
</div><!--//modal-dialog-->
</div><!--//modal-->
<!--// Delete Project Modal -->
<!-- edit project modal -->
<div id="edit-event-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Project</h4>
</div><!--//modal-header-->
<div class="modal-body">
<div>
</div>
</div> <!--//modal-body-->
<div class="modal-footer">
<!--
-->
</div> <!--//Modal-footer -->
</div><!--//modal-content-->
</div><!--//modal-dialog-->
</div><!--//modal-->
<!--//edit project modal-->
$('#del-event-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('id'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-body #id').val(recipient);
$('#del').on('click', function (event) {
var x = document.getElementById("id").value;
$.ajax({
url: 'delproject.php',
type: 'POST',
data :{value:x} ,
success: function(data){
var data = JSON.stringify(data)
alert("id sent is "+data);
//window.location.href="projects.php";
}
});
});
});
$('#edit-event-modal').on('show.bs.modal', function (e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="proid"]').val(bookId);
//var x = document.getElementById("proid").value; alert("pid"+x);
/*$('#edit').on('click', function () {
var x = document.getElementById("proid").value; alert("pid"+x);
var pnm = document.getElementById("pnm").value; alert("pnm"+pnm);
var pcity = document.getElementById("pcity").value; alert("pcity"+pcity);
var feature = document.getElementById("p_feature").value; alert("feature"+feature);
var spec = document.getElementById("p_spec").value; alert("spec"+spec);
$.ajax({
url: 'editproject.php',
type: 'POST',
cache: 'false',
data :{value:x,pnm:pnm,pcity:pcity,feature:feature,spec:pspec} ,
success: function(data){
var data = JSON.stringify(data)
//alert("id sent is "+data);
window.location.href="projects.php";
}
});
});*/
}); 解决方案
('#del-event-modal').on('show.bs.modal', function (event) { var button =
(event.relatedTarget); // Button that triggered the modal var recipient = button.data('id'); // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal =
(this); modal.find('.modal-body #id').val(recipient);
这篇关于无法访问id传递给bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
