jQuery 将动态内容传递给 bootstrap modal 3.2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26517605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass dynamic content to bootstrap modal 3.2
提问by Brecht S
What i'm trying to do is to pass the data-id value to an external link via JQuery ajax. The modal will show up but the data-id attribute is not sending to the external link. I think something is wrong with my Jquery script. But i can't find it.
我想要做的是通过 JQuery ajax 将 data-id 值传递给外部链接。模态将显示，但 data-id 属性不会发送到外部链接。我认为我的 Jquery 脚本有问题。但我找不到它。
This is my link:
这是我的链接：
<a href="javascript:;" data-id="1" onclick="showAjaxModal();" class="btn btn-primary btn-single btn-sm">Show Me</a>
This is my Jquery ajax script:
这是我的 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>
This is my code for the modal:
这是我的模态代码：
<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>
Can anyone help me out here?
有人可以帮我从这里出去吗？
I want to load the content of the page found by test-modal.
我想加载 test-modal 找到的页面内容。
The code of test-modal.php is simple, see below:
test-modal.php 的代码很简单，见下图：
<?php
$uid = $_GET['id'];
echo id: '. $uid;
?>
I have tried to make a jsfiddle: http://jsfiddle.net/2dp12ft8/3/but it's totally not working. I have changed the js code but it will still not work.
我试图制作一个 jsfiddle：http: //jsfiddle.net/2dp12ft8/3/但它完全不起作用。我已经更改了 js 代码，但它仍然无法正常工作。
I see the modal showing up but only the word 'undefined' is showing up and not the content of the external file.
我看到模态出现，但只有“未定义”这个词出现，而不是外部文件的内容。
回答by Steve
Dont mix onclickattributes with event handlers, its messy and can cause errors (such as mistaking the scope of this, which i believe is you main issue here).
不要将onclick属性与事件处理程序混合在一起，它会很混乱并且会导致错误（例如误认为 的范围this，我认为这是您在这里的主要问题）。
If you are using jquery make use of it:
First add a class to the links you want to attach the event to, here i use the class showme:
如果您正在使用 jquery，请使用它：首先向要附加事件的链接添加一个类，这里我使用该类showme：
<a href="#;" data-id="1" class="btn btn-primary btn-single btn-sm showme">Show Me</a>
Then attach to the click event on those links:
然后附加到这些链接上的点击事件：
<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>
To access the variable in php:
要访问 php 中的变量：
$uid = $_GET['id']; //NOT $_GET['uid'] as you mention in a comment
回答by jme11
Try the loadmethod instead. I'm taking a guess here, but it seems like you want to actually load the contents of the page found at test-modal.php. If that's correct, replace your ajax call as follows:
请尝试使用load方法。我在这里猜测一下，但您似乎想要实际加载在 test-modal.php 中找到的页面内容。如果这是正确的，请按如下方式替换您的 ajax 调用：
function showAjaxModal()
{
var uid = $(this).data('id');
var url = "test-modal.php?id=" + uid;
jQuery('#modal-7').modal('show', {backdrop: 'static'});
jQuery('#modal-7 .modal-body').load(url);
}
If your test-modal.php page contains more than a fragment (e.g., it has html and body tags), you can target just a portion of the page by passing an id of the containing element for the content that you want to load, such as:
如果您的 test-modal.php 页面包含多个片段（例如，它有 html 和 body 标签），您可以通过传递包含元素的 id 来定位页面的一部分，以获取要加载的内容，如：
jQuery('#modal-7 .modal-body').load(url+' #container');
which would only load the contents of the element with the id container from your test-modal.php page into the modal-body.
这只会将带有 id 容器的元素内容从 test-modal.php 页面加载到 modal-body 中。
