将动态内容传递到引导模式3.2 [英] Pass dynamic content to bootstrap modal 3.2

问题描述

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

这是我的链接：

 < a href =javascript :; data-id =1onclick =showAjaxModal（）; class =btn btn-primary btn-single btn-sm>显示我< / a> 
  

这是我的jquery ajax脚本：

 < script type =text / javascript> 
函数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 fadeid =modal-7> 
< div class =modal-dialog> 
< div class =modal-content> 
 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> 
< h4 class =modal-title>动态内容< / h4> 
< / div> 
 
< div class =modal-body> 
 
内容正在加载... 
 
< / div> 
 
< div class =modal-footer> 
< button type =buttonclass =btn btn-whitedata-dismiss =modal>关闭< / button> 
< button type =buttonclass =btn btn-info>保存更改< /按钮> 
< / 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 属性与事件处理程序，它的混乱和可能会导致错误（例如错误此范围，我相信这是您在这里的主要问题）。

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

 < a href =＃; data-id =1class =btn btn-primary btn-single btn-sm showme>告诉我< / 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']

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

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