UI Dialog opens multiple times

Question

I am opening dialog onclick of button,If I have clicked multiple times,then dialog opens twice.I dont want the top most small dialog to appear,I need only dialog which is behind. Same data is showing in both dialogs. See image attached

I am using below code

$(document).ready(function () {

    $("#policyDialog").html("");
    $('#policyDialog').dialog({
        autoOpen: false,
    });
});

function onViewDetails(policyID) {
    var policyID = policyID;
    var policydetaildialog = "";
    var title = "title";

    $(".loading").css({
        'display': 'block'
    });
    $('#policyDialog').dialog({
        width: 1000,
        autoResize: false,
        draggable: false,
        hide: null,
        modal: true,
        height: "auto",
        maxHeight: 500,
        maxWidth: 1000,
        minHeight: 450,
        minWidth: 450,
        title: title,
        close: function (e) {
            //e.preventDefault();
        }
    });
    $.ajax({
        type: 'POST',
        url: "xyz.jsp",
        data: {
            dataID: policyID
        },
        success: function (response) {
            //$("#policyDialog").html(response);
            policydetaildialog = response;
            $("#policyDialog").dialog('open');
            //$("#policyDialog").html(policydetaildialog);
            $("#policyDialog").html(response);
        },
        dataType: "html",
        async: false
    });

    /* $("#policyDialog").dialog('open');
            $("#policyDialog").html(policydetaildialog);
            return false; */

    //$("#policyDialog");

    //$('#viewDetail').prop('disabled', true);
}

I have called this function below

<button type="button" class="btn" id="viewDetail" onclick="onViewDetails('<%=policy.getPolicyId()%>');">View details</button>

Following is is my html

<div id="policyDialog"></div>

---

also check below screenshot:

Answer 1

you do not need to create another dialog every time you click the button.

move your dialog declaration out of the click handler:

var _PolicyDialog;
$(document).ready(function () {
    $("#policyDialog").html("");
    _PolicyDialog=$('#policyDialog').dialog({
        autoOpen: false,
        width: 1000,
        autoResize: false,
        draggable: false,
        hide: null,
        modal: true,
        height: "auto",
        maxHeight: 500,
        maxWidth: 1000,
        minHeight: 450,
        minWidth: 450,
        title: title,
        close: function (e) {
            //e.preventDefault();
        }
    });
});

and in your ajax function, open dialog like this:

_PolicyDialog.dialog("open");

Have a look at this Example