jQuery UI Dialog Box - Problem when using Firefox

I have some simple jQuery that renders a page in my Rails app. Here's the jQuery:

$('a.popup').click(function() {
   开发者_如何转开发 $('<div />').appendTo('body').load($(this).attr('href') + ' form').dialog({
        title: $(this).text(),
        width: 425,
        position: 'top',
    });
    return false;
});

and here is the associated HTML, with ERB (embedded Ruby), generating the anchor tag:

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

Anyhow, the problem is: it works in Chrome, displaying the correct page within the dialog. With Firefox, the dialog box has no content, only a title ("Add User").

Any ideas? Thanks!

Hard to say without a live example but maybe you have a timing issue with the asynchronous AJAX call. Try building the dialog in a callback:

$('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;
});

This way the whole content will be available before you hand things off to jQuery-UI.