Ajax 模式窗口的 jQuery UI 对话框

发布于 2024-12-03 09:32:29 字数 805 浏览 4 评论 0原文

我正在尝试创建一些模式窗口，使用 AJAX 和 jQuery UI 对话框小部件动态加载其内容。这个想法是，对话框仅在用户请求某些内容时才存在于页面上，然后在用户单击关闭按钮时再次删除。然而，使用我当前的代码，我有两个问题：1.）在根据我所知进行请求之前，对话框就存在于页面上2.）当用户关闭模式时，除非刷新页面，否则无法再次打开该对话框。我

的应用程序中有以下代码：

$('.ajax').live('click', function()
        {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0)
            {
                dialog = $('<div id="dialog"></div>').appendTo('body');
            }
            dialog.load(
                    url,
                    {},
                    function(responseText, textStatus, XMLHttpRequest)
                    {
                        dialog.dialog();
                    }
                );
            return false;
        });

任何帮助将不胜感激。谢谢

原文

I'm trying to create some modal windows that load in their content dynamically using AJAX with the jQuery UI dialog widget. The idea is that dialog will ONLY exist on the page when the user requests something and then be removed again when the user clicks the close button. However with my current code I have two problems: 1.) the dialog exists on the page before being requested from what I can tell 2.) when a user closes the modal it can't be opened again unless they refresh the page...

I have the following code in my app:

$('.ajax').live('click', function()
        {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0)
            {
                dialog = $('<div id="dialog"></div>').appendTo('body');
            }
            dialog.load(
                    url,
                    {},
                    function(responseText, textStatus, XMLHttpRequest)
                    {
                        dialog.dialog();
                    }
                );
            return false;
        });

Any help would be much appreciated. Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南笙 2024-12-10 09:32:30

这是您需要的代码或在那里测试它：演示

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");
    if ($("#dialog").length == 0)
    {
        dialog = $('<div id="dialog"></div>').appendTo('body');
    }
    $.ajax(
        {
            url: url,
            beforeSend: function (jqXHR, settings)
            {
                //show an animated gif
            },
            complete: function (jqXHR, textStatus)
            {
                //hide the animated gif
            },
            success: function (data, textStatus, jqXHR)
            {
                dialog.dialog().html(data);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                dialog.dialog().html("An error occured...");
            }
        });

    return false;
});

Here's the code that you need or test it there: demo

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");
    if ($("#dialog").length == 0)
    {
        dialog = $('<div id="dialog"></div>').appendTo('body');
    }
    $.ajax(
        {
            url: url,
            beforeSend: function (jqXHR, settings)
            {
                //show an animated gif
            },
            complete: function (jqXHR, textStatus)
            {
                //hide the animated gif
            },
            success: function (data, textStatus, jqXHR)
            {
                dialog.dialog().html(data);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                dialog.dialog().html("An error occured...");
            }
        });

    return false;
});

回复收藏 0 原文

~没有更多了~