如何完成我的模态ajax代码才能正常工作?

时间:2014-01-04 12:08:12

标签: javascript php jquery html css

HTML

<?php foreach (range(0, 29) as $rs) { ?>
<a data-toggle="modal" href="#" data-href="rsc1<?php echo $rs;?>" class="link">rsc1<?php echo $rs;?></a><br/>
<?php } ?>

<div id="dialog-modal"></div>

的JavaScript

$('.link').on('click','a[data-toggle="modal"]',function(e){
var linkValue = $(this).attr('data-href');

$.ajax({
    cache: false,
    type: 'GET',
    url: 'details.php',
    data: 'i=' + linkValue,
    success: function(data) {
        $('#dialog-modal').html(data).dialog();
    }
    e.preventDefault();
}); });

PHP

<?php
$i = $_GET['i'];
echo $i;  ?>

如何在模态对话框中打开网址?请给我演示一下我的这个功能。我需要一个CSS和一些HTML代码。 啊,我也在用这个:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

3 个答案:

答案 0 :(得分:2)

我为您创建了一个有效的解决方案 我在那里评论了php代码并使用了java脚本值。但我希望它能帮到你。

[DEMO] [http://jsfiddle.net/gdVLs/]

答案 1 :(得分:0)

我认为正确的JS源代码是:

 $('.link').on('click', 'a[data-toggle="modal"]', function (e) {
     var linkValue = $(this).attr('data-href');

     $.ajax({
         cache: false,
         type: 'GET',
         url: 'details.php',
         data: 'i=' + linkValue,
         success: function (data) {
             $('#dialog-modal').html(data).dialog();
         }
     });
     e.preventDefault();
 });

答案 2 :(得分:0)

您的元素是动态创建的,因此事件不附带这些元素

所以试试这个

$(document).on('click','.link',function(e){

});