jqueryjquery-uijquery-ui-dialog

JQUERY-ui dialog x button function


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


Solution

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

    When user accepts:

    When user cancels:

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

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