JQuery UI Multiple Dialog Issue

Question

I have functionality where I dynamically create Dialog. Some time I require Modal or Confirm Dialog

So I created to Function

function createDialogWithOutClose()
{
    jQuery('#divPopup').dialog('destroy');

    var dialog = jQuery('#divPopup').dialog({
        autoOpen: false,
        height: 450,
        width: 650,
        modal: true,
        open: function(event, ui){
            jQuery('body').css('overflow','hidden');
        }

    });

    jQuery('#divPopup').dialog('open');
}

and

function createConfirmDialog(url,params)
{
    jQuery('#divPopup').dialog('destroy');

    var dialog = jQuery('#divPopup').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        show: "blind",
        hide: "explode",
        open: function(event, ui){
            jQuery('body').css('overflow','hidden');
        },
        buttons: {
            Ok: function() {
                jQuery( this ).dialog( "close" );
                jQuery.ajax({
                    type: "POST",
                    url: url,
                    data: params
                });
            },
            Cancel: function() {
                jQuery( this ).dialog( "close" );
            }
        }

    });

    jQuery('#divPopup').dialog('open');

}

Problem here is when I give call to this function, It opens previously opened Dialog.

I guess previous instance is not get removed.It doesnt dynamically create Dialog

Any solution??

possible duplicate of jquery: How to completely remove a dialog on close — mplungjan
– mplungjan, Commented Jan 14, 2012 at 11:59

Community · Accepted Answer · 2017-05-23 11:50:32Z

4

Have a look at http://docs.jquery.com/UI/Dialog/dialog#method-destroy

jquery: How to completely remove a dialog on close

http://groups.google.com/group/jquery-ui/browse_thread/thread/4f9804ccb01c1bc8/5b1971d1f0abf1fa?pli=1

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jan 14, 2012 at 11:55

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AliMan Over a year ago

I have one more problem, when I create new Dialog it doesn't get div id as we remove the div on closing Due to this it doesn't wrk properly jQuery('#divPopup').dialog('destroy');

mplungjan Over a year ago

if ($("#divPopup")) $("#divPopup").dialog("destroy");

Adnan Iqbal · Accepted Answer · 2018-01-01 18:24:51Z

-1

Simply use a flag to check dialog state (close/open)

var Open = false;
$('button').click(function () {
    if (!Open) {
        Open = true;
        $(newDiv).dialog({
            close: function (event, ui) {
                Open = false;
            }
        });

    } else {
        alert("Close opened dialog first");
    }
});

answered Jan 1, 2018 at 18:24

Adnan Iqbal

391 silver badge6 bronze badges

Collectives™ on Stack Overflow

JQuery UI Multiple Dialog Issue

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related