Jquery UI Dialog: close from inside

Question

I'm trying to close jQuery UI Dialog from within externally loaded file, which contain a link, which clicked should close the dial.

The "base" file contains the following:

<div id="dialog-operations"><div id="dialog-content"></div></div>
<a href="#" id="search-client-button">Search</a>

And the script:

$("#dialog-operations").dialog({
    autoOpen: false,
    title: "Search",
    width: 800,
    height: 500,
    modal: true,
    position: { my: "center center", at: "center center" },
    open:  function(event, ui) {
        $('#dialog-content').load('myFile.html');
    },
    close: function() {
        $(this).dialog('close');
    }
});

$("#search-client-button").click(function() {
    $("#dialog-operations").dialog("open");
});

Dynamically loaded myFile.html performs the search via Ajax and shows some links that perform some actions and at the end should close the Dialog (in the following example I just try to close the Dialog on Ajax complete):

$.ajax({
    url: "search.php",
    data: $("#search-user-form").serialize(),
    type: "GET",
    context: this
}).done(function(data) {
        $(this).closest('.ui-dialog-content').dialog('close'); // not working
        $("#dialog-operations").dialog( "close" ); // not working
        $(this).dialog("close"); // not working
        this.close(); // not working
        $(this).dialog().dialog("close") // not working
});

The Dialog doesn't close, and in FireBug console I receive errors on undefined methods, or the following one:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

What am I doing wrong? Is it even possible to close the Dialog from within a file loaded with Ajax? I'm using jQuery 1.11.0 and jQuery UI 1.10.4.

I'd greatly appreciate any suggestions!

EDIT

After @Justin's help and many deliberations this is the code I finally end up with. The important info is: first load the file, and then define the Dialog!

$("#dialog-content").load('myFile.html', function(){
    $("#dialog-operations").dialog({
        autoOpen: false,
        title: "Search",
        width: 800,
        height: 500,
        modal: true,
        position: { my: "center center", at: "center center" }
    });

    $("#search-client-button").click(function() {
        $("#dialog-operations").dialog("open");
    });

});

And in the included file (the important fragment only):

$.ajax({
    url: "search.php",
    data: $("#search-user-form").serialize(),
    type: "GET",
    context: this
}).done(function(data) {
    $("#dialog-operations").dialog("close");
});

Unfortunately this approach breaks the separation (the included file makes reference to container defined in parent file), so probably I'll just cease the idea of including the Dialog content from a different file. But that's a different story.

Answer 1

Try removing the context option in your ajax config or try changing the context option to a DOM element instead of this.

EDIT

I think I know now where you went wrong. It may be because the $.ajax function has already been executed by javascript before your load function has first finished it's own ajax request. Try running your load function and then supply to it's 2nd parameter a callback function that creates the dialog and other stuffs. I removed the open option

open:  function(event, ui) {
    $('#dialog-content').load('myFile.html');
}

in your dialog initialization.

$('#dialog-content').load('myFile.html', function(){
    $("#dialog-operations").dialog({
        autoOpen: false,
        title: "Search",
        width: 800,
        height: 500,
        modal: true,
        position: { my: "center center", at: "center center" },
        close: function() {
            $(this).dialog('close');
        }
    });

    $("#search-client-button").click(function() {
        $("#dialog-operations").dialog("open");
    });

    $.ajax({
        url: "search.php",
        data: $("#search-user-form").serialize(),
        type: "GET",
        context: this
    }).done(function(data) {
        $(this).closest('.ui-dialog-content').dialog('close'); // TEST
        $("#dialog-operations").dialog( "close" ); // TEST
        $(this).dialog("close"); // TEST
        this.close(); // TEST
        $(this).dialog().dialog("close") // TEST
    });
});