Question

I’ve got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.

1. So, the site loads, you click a link, and it opens in a dialog. That’s fine. You can close and open it as many times as you want.
2. While it’s open, if you click on one of the links from the loaded content, it doesn’t work.
   • An Ajax GET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebug shows the request)
   • The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)

The links look like this…

<a href="http://www.example.com/index.php?action=something&amp;search=somethingelse#fragment" rel="dialog" title="Title Attribute">

The click event is bound…

$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});

The ajax_dialog function checks to see if there’s a dialog, calls to create one if there isn’t, calls to load the content, sets the title, and opens the dialog if it’s not open.

function ajax_dialog(_this, _event){
    var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
    var linkTitle = $(_this).attr("title");

    // Create dialog
    if(!$('body').find('#ajaxDialog').size()){
        $('body').append('not yet init<br />'); // This shows up the first click only.
        init_dialog('#ajaxDialog');
    }

    // Load Dialog Content
    load_dialog('#ajaxDialog', urlToLoad);

    // Add title
    $('#ajaxDialog').dialog('option', 'title', linkTitle);

    // Open dialog (or reload)
    if(!$('#ajaxDialog').dialog('isOpen')){
        $('#ajaxDialog').dialog('open');
        $('body').append('not yet open<br />'); // This shows up the first click only.
    }
    return false;
}

The init_dialog function creates the dialog if there isn’t one…

function init_dialog(_this){
    $('body').append('<div id="ajaxDialog"></div>');
    // Set Dialog Options
    $(_this).dialog({
        modal:true,
        autoOpen:false,
        width:900,
        height:400,
        position:['center','center'],
        zIndex: 9999,
        //open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
        close:function(){$(this).empty();}
    });
}

The load_dialog function loads the desired content into the dialog.

function load_dialog(_this, urlToLoad){
    $(_this).load(urlToLoad, function(){
        $('body').append(urlToLoad + ' load function<br />'); // This shows up each click
        $(_this).append("Hihi?"); // This shows up each click
    });
    // The loaded information only shows the first click, other times show an empty dialog.
}

Answer 1

Hah. As shown in the code, I was using $jQuery.load() and pulling the exact href of the link as the URL to request. All the URLs had fragments/anchors on the end, that is: ….html#id-of-div.

In this case, the script itself was working fine, but the #id-of-div didn’t exist on the page yet. That’s why I could see content returned, but the dialog just ended up blank. 🙂