我想做的是通过 JQuery ajax 将 data-id 值传递给外部链接。 模式将显示,但 data-id 属性不会发送到外部链接。我认为我的 Jquery 脚本有问题。但是我找不到它。
这是我的链接:
<a href="javascript:;" data-id="1" onclick="showAjaxModal();" class="btn btn-primary btn-single btn-sm">Show Me</a>
这是我的 Jquery ajax 脚本:
<script type="text/javascript">
function showAjaxModal()
{
var uid = $(this).data('id');
jQuery('#modal-7').modal('show', {backdrop: 'static'});
jQuery.ajax({
url: "test-modal.php?id=" + uid,
success: function(response)
{
jQuery('#modal-7 .modal-body').html(response);
}
});
}
</script>
这是我的模态代码:
<div class="modal fade" id="modal-7">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Dynamic Content</h4>
</div>
<div class="modal-body">
Content is loading...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info">Save changes</button>
</div>
</div>
</div>
</div>
有人能帮我吗?
我要加载test-modal找到的页面内容。
test-modal.php的代码很简单,见下:
<?php
$uid = $_GET['id'];
echo id: '. $uid;
?>
我尝试制作一个 jsfiddle:http://jsfiddle.net/2dp12ft8/3/但它完全不起作用。 我已经更改了 js 代码,但它仍然无法正常工作。
我看到模态出现了,但只出现了“undefined”这个词,而不是外部文件的内容。
最佳答案
不要将 onclick
属性与事件处理程序混合使用,这会造成困惑并可能导致错误(例如弄错 this
的范围,我相信这是您的主要问题)。
如果您正在使用 jquery,请使用它:
首先向要附加事件的链接添加一个类,这里我使用类 showme
:
<a href="#;" data-id="1" class="btn btn-primary btn-single btn-sm showme">Show Me</a>
然后附加到这些链接上的点击事件:
<script type="text/javascript">
jQuery(function($){
$('a.showme').click(function(ev){
ev.preventDefault();
var uid = $(this).data('id');
$.get('test-modal.php?id=' + uid, function(html){
$('#modal-7 .modal-body').html(html);
$('#modal-7').modal('show', {backdrop: 'static'});
});
});
});
</script>
在 php 中访问变量:
$uid = $_GET['id']; //NOT $_GET['uid'] as you mention in a comment
关于jquery - 将动态内容传递给 bootstrap modal 3.2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26517605/