CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapasp.net-mvc-4modal-dialog
Mike Smith
Mike Smith

Reputation: 642

Destroying jquery Modal

I have a modal window that works great the first time you click on it, but if you close it and try to click the link to trigger it again, it seems to create an entirely new modal dialog in the code.

This is a problem because now I have 2 of them. I either need to figure out a way to stop this from happening (and just do a hide/show on the same dialog) or destroy it upon close.

I tried the destroy path and I've seen a couple of very helpful posts but I just can't seem to get my code working properly. Here is my code so far:

The modal is tied to an Actionlink

@Html.ActionLink("Send Email", "SendErrorEmail", "Support", new { id = Model.jcode },
            new { @class = "openDialog btn btn-inverse", data_dialog_id = "sendErrorDialog", data_dialog_title = "Send Email", @id = "senderror" })

and this is the javascript code that I have:

$(".openDialog").on("click", function (e) {
    e.preventDefault();

    $('#loadingdiv').show();
    $("<div></div>")
    .addClass("dialog")
    .attr("id", $(this).attr("data-dialog-id"))
    .appendTo("body")
    .dialog({
        title: $(this).attr("data-dialog-title"),
        modal: true,
        draggable: true,
        resizable: false,
        width: modalwidth,
        dialogClass: "popup1"


    })
    .load(this.href, function () {
        $('#loadingdiv').hide();
    })

});

I know I need to add something like on.("hidden"... but I can't seem to get it to work.

Upvotes: 0

Views: 150

Answers (1)

gdoron
gdoron

Reputation: 150253

This is how you destroy the dialog:

$( ".selector" ).dialog( "destroy" );

This is how you open the existing dialog, no need to destroy:

$( ".selector" ).dialog( "open" );

dialog docs

If you want to check if that div has is inside a dialog, you can use something like this:

if ($('#divId').closest('.ui-dialog').length === 0) 
    // not in a dialog.

Upvotes: 2

Related Questions