jQuery UI close dynamic dialog…or just the open dialog

Question

I am trying to close an open dialog at the end of a function call and also use my current button element to close the dialog. Here is the code that opens the dialog. It is being called dynamically using the 'rel' attribute of the '.modal_btn'. It opens just as expected:

    modalDialog = function(dialogId){
        $(dialogId).dialog({
            modal: true,
            draggable: false,
            resizable: false,
            width: 'auto',
            open: function() { $(".ui-dialog-titlebar-close").hide(); }
        });
    }

    $('.modal_btn').live('click', function(){
        var dialogId = $(this).attr('rel');
        modalDialog(dialogId);
    });

Now after the dialog is open I would like to use my current HTML elements for buttons: a Cancel and Save button. The save button executes the ajax call and after the ajax call is complete I would like to close the dialog. Also, I would like to be able to close the open dialog just by clicking the Cancel button. I just can't seem to grasp this simple functionality...any ideas?

Answer 1

$(dialogId).dialog('close'); ?

Edit in response to comment:

Well, how about this then. In your modalDialog function, apply a class to the dialog itself: $(dialogId).addClass('currently-open-dialog') .

Then your close click function can do $('.currently-open-dialog').removeClass('currently-open-dialog').dialog('close');

Answer 2

couple of ways to put text on the button: standard cancel and literal. Same basic action method however:

'Yes, Save and Exit': function()
            {
                callMyAjaxFuction();
                $(this).dialog('close');
                            },
            Cancel: function()
            {
                $(this).dialog('close');
            }