jQueryUI Dialog box closing on Button Click

Question

Im trying to create a dialog box with some additional interactivity inside; namely adding/removing options from a multi-select. basic code below:

jQuery

$(document).ready(function() {
    $("#addCallDialogForm").dialog({
        autoOpen: false,
        model: true,
        width: 500,
        buttons: {
            "Add Call": function() {
                alert("Adding Call")

                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        },

        open: function(event, ui) {
            //Doing additional Stuff Here
        },

        close: function(event, ui) {
            //Doing additional Stuff Here Too
        }
    });

    $("#addBtn").click(function() {
        alert("button Clicked");
    });
});

HTML

<div id="addCallDialogForm" title="Add Call">
    <form>
        <fieldset>
            <button id="addBtn">Add</button>
        </fieldset>
    </form>
</div>

The problem is that when I click the 'Add' button, the alert displays, but as soon as I click OK, the dialog closes. I tried using the 'beforeClose' method to specify when the dialog should close, but that didnt help.

Can anyone help. Thanks in advance.

Answer 1

After some research I found that clicking any button in the dialog submits that form. By adding event.preventDefault() as the first line in the required method/s, the button does what I want without submitting and closing.

Related Post: Here

Thanks for trying - G

Answer 2

Button tag:

<asp:Button ID="btnClose" runat="server" Text="Cancel" Style="margin-left: 12px;
    background-color: #FE8000; color: white" 
OnClientClick="closeCommentPopup()" />

closeCommentPopup function:

<script type="text/javascript">
    function closeCommentPopup() {
        $('#dialog').dialog('close');
        return false;
    };
</script>