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

【问题标题】：jQuery UI Dialog Box - Problem when using FirefoxjQuery UI 对话框 - 使用 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 上的“加载页面片段”

标签： jquery ruby-on-rails ruby jquery-ui firefox

【解决方案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 之前，整个内容都将可用。

【讨论】：