6

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

TEST

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

Improve this question
3
  • Hiya, sup man, you mean when user click X you want cancel function to be called? Commented Jun 28, 2012 at 7:38
  • function cancel() { alert("test");}, Commented Jun 28, 2012 at 7:44
  • Cool, yep, see my post below with Demo, hope it helps beforeClose is a very good APi for this use which might come handy, :) Commented Jun 28, 2012 at 8:04

3 Answers 3

Reset to default
8

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");}
             }
};
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Hiya bruv, just an idea we can use beforeClose like below demo : docs.jquery.com/UI/Dialog#event-beforeClose that might suffice. cheerios :)
@newbie I've updated answer with working code. See working demo here: jsfiddle.net/6deP4
@JohnRiche bro :) lol you jsfiddle only contains my change I reckon you forgot to add yours, just reminding lol :P
@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!
@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.
|
3

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


});​
Improve this answer

7 Comments

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.
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,
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.
@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 :)
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.
|
0

For beforeClose you need to check X was clicked or it will be triggered for Ok button too, source.

beforeClose: function (e, ui) {
    if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close'))
        e.preventDefault();
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.