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?

Answer 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();
                        }
                    })
                },