Question

我要做的是通过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">&times;</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代码，但它仍然无效。

我看到模态显示但只显示“未定义”这个词，而不是外部文件的内容。

Answer 1

不要将onclick属性与事件处理程序混合，它的混乱可能会导致错误（例如误认为this的范围，我相信这是你的主要问题）。

如果您正在使用jquery使用它：首先在要附加事件的链接上添加一个类，这里我使用类showme：

<a href="#;" data-id="1" class="btn btn-primary btn-single btn-sm showme">Show Me</a>

然后附加到这些链接上的click事件：

<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

Answer 2

请尝试使用 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);

    }

如果你的test-modal.php页面包含多个片段（例如，它有html和body标签），你可以通过传递你想要的内容的包含元素的id来仅定位页面的一部分加载，例如：

jQuery('#modal-7 .modal-body').load(url+' #container');

只会将带有id容器的元素的内容从test-modal.php页面加载到模态体中。

将动态内容传递给bootstrap模式3.2

2 个答案: