Question

我有一个使用echo语句动态生成的页面列表。例如：

<a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']; ?></a>

这是制作jquery ui对话框窗口的代码：

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false,
    });

    $('#open_category_edit_dialog').click(function() {
        $('#category_edit_dialog').dialog('open');
        return false;
    });

});

我想要实现的是在点击链接的那一刻，jquery ui对话框将加载内容。所以问题更可能是如何加载用php生成的外部链接。

Answer 1

使用jQuery，您可以使用load（）函数对服务器进行AJAX调用，以便加载内容。如果您希望在点击事件中发生所有这些，那么您可以执行以下操作：

HTML：

 <a id="clicker" href="#">Click Here</a>
 <div id="content"></div>

jQuery的：

 $(document).ready(function(){
       $('#clicker').click(function(){
            $('#content').load('URL OF YOUR PHP PAGE');
            //start your dialog here

       });

  });

当然，我的示例中的内容div是您用来创建对话框的div。这样，当用户单击链接时，他们会看到打开的对话框，其中包含从服务器加载的内容。

Answer 2

你有HREF int he anchor，所以你要做的就是使用jQuery加载函数来获取链接到HTML并将其放在你的页面上。

假设你的链接有以下HTML（锚中奇怪的未闭合范围对我来说没有意义）：

<a href="<?php echo $action['href']; ?>" class="dialogLink"><?php echo $action['text']; ?></a>

您可以修改您的javascript，使其工作如下：

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false
    });

    $('a.dialogLink').click(function() {
        var url = $(this).attr('href');
        $('#category_edit_dialog').load(url, function() {
            $('#category_edit_dialog').dialog('open');
        });
        return false;
    });
});

它们的关键是将click事件绑定到具有dialogLink类的链接。它将获得点击时指向的URL，将在该URL找到的内容加载到页面上已有的对话框内容div中，一旦有了HTML，就会打开对话框。

jquery ui对话框和加载外部内容

2 个答案: