JQuery UI Dialog - Ajax Update on success $(this).dialog('close');

Question

Having issues referencing $(this) from within a the nested ajax 'success' function... I know this is a scope issue, but can't seem to find a clean way to close the dialog on a successful update. Thanks for any help.

$("#dialog_support_option_form").dialog({
        width: 400,
        height: 180,
        bgiframe: true,
        autoOpen: false,
        modal: true,
        buttons: {
            'Save Support Option': function(){
                $.ajax({
                    type: 'POST',
                    url: "support_options/create_support_option.php",
                    data: $(this).find('form').serialize(),
                    success: function(data){
                        $("#list_support_options").html(data);
                        $(this).dialog('close');
                    }
                });
            },
            'Cancel': function(){
                $(this).dialog('close');
            }
        },
        close: function(){
            $(this).find('input').val('');
        }
    });

Answer 1

You need to have a copy of that variable, like this:

var dlg = $(this);
$.ajax({
   type: 'POST',
   url: "support_options/create_support_option.php",
   data: $(this).find('form').serialize(),
   success: function(data){
     $("#list_support_options").html(data);
     dlg.dialog('close');
   }
});

Since this is in a different context on return, you need to capture it and pass it into the closure :)

Answer 2

try it with $.proxy()

success: $.proxy(function(data){
   $(this).dialog('close');
}, this);

You can 'pass' the scope from 'above' to a function with it

Kind Regards

--Andy

Answer 3

You should use the ajax option context: $(this), to set the scope for the callbacks to the selected element.