CODEWITHSUNDEEP
javascriptjquery
themerlinproject
themerlinproject

Reputation: 3582

can't close dialog box within ajax success

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?

Upvotes: 4

Views: 10920

Answers (4)

MJC
MJC

Reputation: 3949

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

Upvotes: 0

Jeff Lauder
Jeff Lauder

Reputation: 1247

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

Upvotes: 0

robert
robert

Reputation: 8717

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

Upvotes: 11

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

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

Upvotes: 2

Related Questions