将动态内容传递给 bootstrap modal 3.2 [英] Pass dynamic content to bootstrap modal 3.2

问题描述

我想要做的是通过 JQuery ajax 将 data-id 值传递给外部链接.模态将显示，但 data-id 属性不会发送到外部链接.我认为我的 Jquery 脚本有问题.但是我找不到.

这是我的链接:

这是我的 Jquery ajax 脚本:

这是我的模态代码:

<div class="modal-body">内容加载中...
<div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">关闭</button><button type="button" class="btn btn-info">保存更改</button>

有人可以帮我吗?

<小时>

我想加载 test-modal 找到的页面内容.

test-modal.php 的代码很简单，见下:

我试图制作一个 jsfiddle:http://jsfiddle.net/2dp12ft8/3/ 但它完全不是在职的.我已经更改了 js 代码，但它仍然无法工作.

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

解决方案

不要将 onclick 属性与事件处理程序混合使用，它会很混乱并且可能导致错误(例如误认为 this，我相信这是您的主要问题).

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

然后附加到这些链接上的点击事件:

在php中访问变量:

$uid = $_GET['id'];//不是您在评论中提到的 $_GET['uid']

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.

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:

    <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">&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>

Can anyone help me out here?

---

I want to load the content of the page found by test-modal.

The code of test-modal.php is simple, see below:

<?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.

I see the modal showing up but only the word 'undefined' is showing up and not the content of the external file.

解决方案

Dont mix onclick attributes with event handlers, its messy and can cause errors (such as mistaking the scope of this, which i believe is you main issue here).

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:

<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:

$uid = $_GET['id']; //NOT $_GET['uid'] as you mention in a comment

这篇关于将动态内容传递给 bootstrap modal 3.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！