Question

I’d like to get a notification when a users pushes a button to dismiss a dialog. I’ve tried the following but it doesn’t work:

<div id="TestDialog"/>

$("#TestDialog").dialog({
    autoOpen: true,
    resizable: true,
    modal: true,
    position: ['middle', 'middle'],
    savePushed: function() {
        alert('save pushed');
    },
    closePushed: function() {
        alert('save pushed');
    },

    buttons: {
        "Save": function() {
            // alert('save');
            savePushed();

            $(this).dialog("close");
        },
        Close: function() {
            //alert('close');
            closePushed();
            $(this).dialog("close");
        }
    }
});

Any other ideas?

Answer 1

You have to properly define the savePushed() and closePushed() functions. Since they are not a part of Jquery-UI Dialog, you can’t set it as an option of it.

See this working Fiddle Example!

Rewrite your code to this:

$("#TestDialog").dialog({
    autoOpen: true,
    resizable: true,
    modal: true,
    position: ['middle', 'middle'],
    buttons: {
        "Save": function() {
            alert('Save button was pressed!');
            $(this).dialog("close");
        },
        "Close": function() {
            alert('Close button was pressed!');
            $(this).dialog("close");
        }
    }
});

---

If you need

to call the function savePushed() or closePushed(), when the user presses the button, you can rewrite your code as this:

function savePushed() {
    alert('Save button was pressed!');
}

function closePushed() {
    alert('Save button was pressed!');
}

$("#TestDialog").dialog({
    autoOpen: true,
    resizable: true,
    modal: true,
    position: ['middle', 'middle'],
    buttons: {
        "Save": function() {
            savePushed();
            $(this).dialog("close");
        },
        "Close": function() {
            closePushed();
            $(this).dialog("close");
        }
    }
});

See this working Fiddle example!