JQUERY-ui dialog x button function

Question

I'm using the jquery-ui dialog box. My problem is upon clicking the x button to close the dialog, i also need to perform the cancel() function.

How can I do this?

var content = 
{
    autoOpen    : false,
    modal       : true,
    width       : 350,
    minHeight   : 50,
    height      : 350,
    position    : "center",
    resizable   : false,
    draggable   : false,
    close       : function () {$(".privacy_modal").prop("checked", false);},
    buttons: 
    {
        "Cancel": function cancel() 
        { 
            $(".privacy_modal").prop("checked", false); $(this).dialog("close"); 
        },
        "Accept": function accept() 
        {
            $(".privacy_modal").prop("checked", true); $(this).dialog("close"); 
        }
    }
};

NOTE: Using close doesn't solve my problem because it overrides the function when i clicked the accept button

Solution 1

You could use a third-party variable (bAccepts which is False by default) and third-party method.

When user accepts:

• Set bAccepts to True

When user cancels:

• Set bAccepts to False

When onClose is fired, call the method doClose() which does the following:

• if bAccepts is True => accept
• else => cancel

Here is some un-tested psuedo-code. See working code.

var bAccepts = false;
var content = {
                    autoOpen    : false,
                    modal       : true,
                    width       : 350,
                    minHeight   : 50,
                    height      : 350,
                    position    : "center",
                    resizable   : false,
                    draggable   : false,
                    close       : function () { if (bAccepts) {...} else {...} },
                    buttons: {
                        "Cancel": function cancel() { bAccepts = false; $(this).dialog("close");},
                        "Accept": function accept() { bAccepts = true; $(this).dialog("close");}
             }
};

Solution 2

Working demo http://jsfiddle.net/Ea6Hm/1/

You can use : http://docs.jquery.com/UI/Dialog#event-beforeClose

using beforeClose you can call any function you want to invoke before the Dialog box close.

Hope this helps,

code

$(document).ready(function() {
    $('#theLink').click(function() {
        $("#forgot-dialog").dialog("open");
    });

    $("#forgot-dialog").dialog({
        modal: true,
        autoOpen: false,
        height: 255,
        width: 300,
        beforeClose: function() {
            alert("Do whatever before Close");
        },
        buttons: {
            "Retrieve": function() {
                document.forms["forgotform"].submit();
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
    });


});​

Comments

[Tats_innit]

Hiya, sup man, you mean when user click X you want cancel function to be called?

[newbie]

function cancel() { alert("test");},

[Tats_innit]

Cool, yep, see my post below with Demo, hope it helps beforeClose is a very good APi for this use which might come handy, :)

[Tats_innit]

Hiya bruv, just an idea we can use beforeClose like below demo : docs.jquery.com/UI/Dialog#event-beforeClose that might suffice. cheerios :)

[jonjbar]

If the user wants to stay on the current page, this won't work: you won't be able to close the dialog without triggering the beforeClose event.

[Tats_innit]

Hiya @JohnRiche I reckon this will work because beforeClose = This event is triggered when a dialog attempts to close. hence beforeClose event will trigger whatever funtio s/he is calling, anyhoo OP might be able to throw more light on that context, but demo should be clear, Cheers for comment,

[jonjbar]

@newbie I've updated answer with working code. See working demo here: jsfiddle.net/6deP4

[Tats_innit]

@JohnRiche bro :) lol you jsfiddle only contains my change I reckon you forgot to add yours, just reminding lol :P

[jonjbar]

Yes, beforeClose and close will be called when dialog is closed, but OP wanted to have the same action done when Cancel button is clicked and when X close button is clicked: this can be achieved with a third party variable, see my answer.

[Tats_innit]

@JohnRiche Yep, correct and demo works accordingly, You can see in demo again that when you click cancel beforeClose will invoke. i.e. in any case when dialog will close beforeClose will come handy hence less convoluted code. let me know if its not clear bruv :)

[Tats_innit]

@JohnRiche ha ha yes now its what your post depicts :P Cool cool! Just a minor addition: docs.jquery.com/UI/Dialog#event-close Note This event is triggered when the dialog is closed. have nice one bruv!

[jonjbar]

Right but the way you handle "Accept" (Retrieve in your demo) is by leaving the page, therefore you do not close the dialog. I don't think this is the ideal solution if the OP wants to stay on the page.

[Tats_innit]

@JohnRiche :)) I think the function invoke beforeClose should be a right solution as, Ofcourse Accept code for OP is different; in this case s/he wants to tackle beforeClose functionality.

[newbie]

Hi! The problem is I need to close the dialog box again upon clicking the accept button. That's why It is not working. See my code again. Thank you.

[newbie]

@JohnRiche, your code works. BUt the checkbox is being checked with a delay. The dialog box is already prepared before the bAccepts variable is changed. Thank you.

[jonjbar]

@newbie Try using beforeClose instead of close, it will happen sooner.

[puddinman13]

@jobjbar's solution works well, but has a small bug. After click accept, re-opening the dialog box, and then clicking the X, the box shows an accept message instead of a cancel message. The variable needs to be reset. I took advantage of the open method to reset the bAccepts variable. See this: jsfiddle.net/puddinman13/2dz8P/1