jQuery UI 对话框 - 使用 Firefox 时出现问题

Posted 2023-05-08

【中文标题】jQuery UI 对话框 - 使用 Firefox 时出现问题

【英文标题】：jQuery UI Dialog Box - Problem when using Firefox

【发布时间】：2011-06-25 17:59:35

【问题描述】：

我有一些简单的 jQuery，可以在我的 Rails 应用程序中呈现页面。这是 jQuery：

$('a.popup').click(function() 
    $('<div />').appendTo('body').load($(this).attr('href') + ' form').dialog(
        title: $(this).text(),
        width: 425,
        position: 'top',
    );
    return false;
);

这里是关联的 html，带有 ERB（嵌入式 Ruby），生成锚标记：

<p><%= link_to "Add User", new_user_path, :class => "popup" %></p>

无论如何，问题是：它在 Chrome 中工作，在对话框中显示正确的页面。在 Firefox 中，对话框没有内容，只有一个标题（“添加用户”）。

有什么想法吗？谢谢！

【问题讨论】：

Firefox 中是否有任何 javascript 错误？什么版本的 JQuery？

验证您的标记。如果没有匹配的div标签等，IE和FF偶尔会放弃渲染。

@Captain，有趣..让我检查一下。 @ddagradi，1.4.2。

没有标记问题。有什么想法吗？

@Harborhoffer: .load() 允许您将选择器附加到 URL 以自动提取返回的 HTML 的一部分，请参阅 api.jquery.com/load 上的“加载页面片段”

【参考方案1】：

如果没有实时示例很难说，但您可能在异步 AJAX 调用方面遇到了时间问题。尝试在回调中构建对话框：

$('a.popup').click(function() 
    var $a   = $(this);
    var $dlg = $('<div/>');
    $dlg.load($a.attr('href') + ' form', function() 
        $dlg.dialog(
            title:    $a.text(),
            width:    425,
            position: 'top'
        );
    );
    return false;
);

这样，在您将事情交给 jQuery-UI 之前，整个内容都将可用。