can't close dialog box within ajax success

Question

I'm calling a dialog box on the fly (on click), not setting it up as a var first. Like so:

$(".deleteSaved").click(function() {
        save_id = $(this).attr('id');


    div="<div>Are you sure you want to delete this?</div>";
    $(div).dialog({ 
        buttons: { 
            "Delete": function() { 
                $.ajax ({
                    url:"util.php",
                    data:"q=0&f=delete&save_id="+save_id,
                    success: function(result){
                        $(this).dialog("close"); //this line is not working
                        $("#toprow"+save_id).fadeOut();
                        $("#botrow"+save_id).fadeOut();
                    }
                })
            },
            "Cancel": function() { 

                $(this).dialog("close");
            } 
        },
        modal: true,
        title: 'Delete Saved Signal',
        resizable: false
    });
});

But when I call $(this).dialog("close"); within the ajax success function I get the following error:

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

Within the "cancel" button $(this).dialog("close"); works just fine.

How can I get the close function to work within the ajax success call?

Solution 1

Inside success function, 'this' is not pointing to dialog object. You may have to store the dialog object in another variable, like shown below

"Delete": function() { 
                 var that = this;
                    $.ajax ({
                        url:"util.php",
                        data:"q=0&f=delete&save_id="+save_id,
                        success: function(result){
                            $(that).dialog("close"); //this line will work
                            $("#toprow"+save_id).fadeOut();
                            $("#botrow"+save_id).fadeOut();
                        }
                    })
                },

Solution 2

You can't refer it using $(this) because you are in another function , You can do like this,

div="<div id='yourDialog'>Are you sure you want to delete this?</div>";
//...........    

     $("#yourDialog").dialog("close");

Comments

[themerlinproject]

Hi Mario - I figured as much. Solution?

[MJC]

The soltion? before the $(div).dialog... do the var myDiv = $(div) and then, you can call myDiv.dialog('close')

[Anurag]

That is a great solution @robert, I have been struggling for hours on this one. Thanks a lot! :)