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?

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?

• javascript
• jquery

4 Answers 4

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

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");

Your $(this) has a different meaning within the success function. Try assigning it to a variable and using that within your ajax success function

The Scope on the "success" function isn't the same as the scope for the "Delete" or "Cancel" functions...

Try using something like var myDiv = $(div); and then you can call it wherever you want. Minimize the use of the $(this) to avoid this sort of situations.

Also, just a quick tip, instead of $(this).attr('id') use this.id ;)