CODEWITHSUNDEEP
jqueryjquery-ui-dialog
Nick Pickering
Nick Pickering

Reputation: 3185

cannot call 'close' prior to initialization, 'this' isn't a dialog?

I generate and show this dialog when a button is clicked elsewhere.

It seems this in my new buttons isn't referring to the dialog that is being created.

Why not?

d = document.createElement('div');
$(d).attr("id", "dialog")
    .load('/my/php/file.php')
    .addClass('dialog_frame')
    .appendTo('body')
    .hide();

$(d).dialog({
    autoOpen: true,
    modal: true,
    buttons: 
    [
        {
            "text": "Save",
            "click": 
                function() {
                    $(this).dialog("close");
                }
        },
        {
            "text": "Cancel",
            "click":
                function() {
                    $(this).dialog("close");
                }
        }
    ],
    close: function() {

    }
});

Update

alert($(d).attr("id"));

just before the dialog initialization returns 'dialog'. 

alert($(this).attr("id"));

inside the "Save" click function, gives me "dialog", which is what I'd expect.

Upvotes: 1

Views: 121

Answers (1)

Musa
Musa

Reputation: 97717

Your issue is the ajax request, which overwrites parts of the dialog.
Display the dialog in side the ajax callback. 

d = document.createElement('div');
$(d).attr("id", "dialog")
    .load('/my/php/file.php', function(){
        $(d).dialog({
            autoOpen: true,
            modal: true,
            buttons: 
            [
                {
                    "text": "Save",
                    "click": 
                        function() {
                            $(this).dialog("close");
                        }
                },
                {
                    "text": "Cancel",
                    "click":
                        function() {
                            $(this).dialog("close");
                        }
                }
            ],
            close: function() {

            }
        });
    })
    .addClass('dialog_frame')
    .appendTo('body')
    .hide();

Upvotes: 1

Related Questions