jQuery UI对话框 - 在对话框中打开外部动态php文件

时间:2011-03-10 18:41:28

标签: jquery jquery-ui dialog popup onclick

我今天正在寻找一个简单的解决方案几个小时,但我没有找到它。

我有一个表(#example),其中包含数据并带有指向页面的链接(allinfo.php),其中显示了特定行的所有数据(它们并未全部显示在表中)。因此,我想让用户更容易。我希望他们可以点击链接,并显示包含allinfo.php内容的对话窗口。

我的脚本:

$(document).ready(function() {


        $('#example a').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $(this).one('click', function() {
                $dialog
                    .load($link.attr('href') + ' #content')
                    .dialog({
                        title: $link.attr('title'),
                        width: 500,
                        height: 300
                    });

                $link.click(function() {
                    $dialog.dialog('open');

                    return false;
                });

                return false;
            });
        });


    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
                "bJQueryUI": true,
        "sAjaxSource": "url.php",
        "fnServerData": fnDataTablesPipeline,
                "sPaginationType": "full_numbers",             


    } );




} );

所以,问题是表是用javascript生成的,我不能在那里添加对话框窗口的选项。如果我在网站上的其他地方写:所有信息和点击,一切都会有效。

我只能使用“onclick”命令查看解决方案,但我不知道如何使用它?

所以在表中应该是所有信息

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

我会使用.live和$(this).attr('href')和$ .ajax的组合 你也可以使用事件对象 功能(事件)

答案 1 :(得分:0)

这样的事情应该有效,但是因为我无法对任何事情进行测试,所以有点困难:

$(document).ready(function() {

    // As soon as the page loads, attach a div for showing content:
    $('body').append('<div id="dialogPopup"></div>');

    // Setup the dialog:
    $('#dialogPopup').dialog({
                        width: 500,
                        height: 300,
                        autoOpen: false});

    // Listen to ALL anchors in #example:
    $('#example a').live('click', function(e) {
        // Don't let the browser follow the link:
        e.preventDefault();
        // Store a link to the link clicked:
        var obj = $(this);
        // Store a link to the dialog:
        var dia = $('#dialogPopup');
        // Empty the content of the popup:
        dia.html('');
        // Load the contents into the dialog:
        dia.load(obj.attr('href') + ' #content')
           // Set the title:
           .dialog({title: obj.attr('title')})
           // Open the dialog:
           .dialog('open');
    });


    $('#example').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": true,
        "sAjaxSource": "url.php",
        "fnServerData": fnDataTablesPipeline,
        "sPaginationType": "full_numbers",             
    });
});