CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Silver Light
Silver Light

Reputation: 45912

Diplay jQueryUI dialog again after it was closed

I have a several links on the page and I want to show individual jQuery dialogs for each one. Here is the markup:

<html>
    <body>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                 <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                  <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
    </body>
</html>

And the Javascript:

$(document).ready(function() {
    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
            autoOpen: false,
            title: 'You are going to delete a div!',
            buttons: {
                "Do delete": function() {
                    alert('You have entered:' + $(this).find('textarea').val());
                    $(this).dialog("close");
                    $(this).closest('DIV.container').hide(); //hiding div (primary action)     
                }
            },
            width: 800
        });
        d.dialog("open");
    });
});

As you can see, links that trigger the event have delete_link class and DIVs that should be jQuery UI dialogs, have dialog_box class.

The problem: when Dialog is opened and user have pressed "close", it is not possible to open dialog again.

According to google and SO search I'm not the first one with this problem. This post, for example: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ It seems, that dialog should be somehow initialized before click() action, but in all solutions, there is only one dialog on page, with assigned id - I just cannot apply this to my situation.

I've tried this, but it does not work:

$(document).ready(function() {
    //initializing
    $('DIV.dialog_box').dialog({
        autoOpen: false,
        title: 'You are going to delete a div!',
        buttons: {
            "Do delete": function() {
                alert('You have entered:' + $(this).find('textarea').val());
                $(this).dialog("close");
                $(this).closest('DIV.container').hide(); //hiding div (primary action)     
            }
        },
        width: 800
    });

    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        $(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
    });
});

I have prepeared demo at jsFiddle: http://jsfiddle.net/NQmhk/ No jQUery UI css there, but I hope it will be enough to understand the problem.

Any help will be greatly appreciated.

Upvotes: 3

Views: 9643

Answers (8)

Lodlaiden
Lodlaiden

Reputation: 391

I'm using C#, MVC Partials, and nested jQuery dialogs. I was displaying a [second] dialog (MVC Partial) from an already displayed dialog (MVC Partial). The dialog would re-display a second time, but it would be pushed up, because the old dialog container wasn't getting destroyed, offsetting the calculation of center/top.

This removes the dialog, leaves the already displayed dialog intact, and displaying the dialog again is cleared of previously entered data.

buttons: {
                        "Close": function () {
                            $("#MyDivPlaceholder").dialog("close");
                            $("#MyDivPlaceholder").empty();
                            $("div[aria-describedby='MyDivPlaceholder']").remove();
                        }
                    }

Upvotes: 0

Md. Shafiqur Rahman
Md. Shafiqur Rahman

Reputation: 3058

change 

$(this).dialog("close");

with 

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

Upvotes: 0

pierre delaunay
pierre delaunay

Reputation: 21

yes destroy 'll work for me :

$('.ui-dialog-titlebar-close').click(function(){

   $("#dialog2").dialog("destroy");

});

Upvotes: 0

Bob Balfe
Bob Balfe

Reputation: 11

You should still call "destroy" on the dialog no matter what. This will prevent a memory leak (multiple DIV's) created each time the dialog is called. In the "close" function of the dialog just put $("#dialog").dialog("destroy"); to do proper cleanup.

Upvotes: 1

willvv
willvv

Reputation: 8639

Actually I was having a similar problem and with some hints from here I solved it.

Basically I'm creating a link with the class "show-popup-link", which will open the following element as a popup window when clicked.

<a href="#" class="show-popup-link">Click for popup</a>
<div class="hidden-element">Some content for the popup</div>

And after the page load I'm executing this javascript method:

function SetupShowPopupLink() {
   $("a.show-popup-link").click(function () {
      var $link = $(this);
      var dialogClone = $link.next().clone();
      $link.next().dialog({ 
         title: "title", 
         close: function () { $link.after(dialogClone); }
       });
   });
}

Basically I clone the element that I'm displaying as the popup before the dialog function moves it to the end of the page, and then I insert it after the link (it was hidden at the beginning and will be hidden when inserted again).

My only concern is that there might be some memory leak with the element that is being displayed as the popup, but maybe not as this should be handled by the jquery-ui.

I hope this works for you.

Upvotes: 5

Quincy
Quincy

Reputation: 4433

Try to call dialog("destroy") in your dialog button function.

Upvotes: 4

nfplee
nfplee

Reputation: 7977

One option is to put an id on each dialog box eg:

<div id="dialog_box_1" class="dialog_box">
  ...
</div>

Then have the following link which opens the dialog box (changing #1 to open the appropriate dialog box):

<a href="#1" class="dialog_open">Open</a>

Now you can move the code which hooks up the dialog box outside of the click event and try something like:

<script type="text/javascript">
    $(function() {
        $('.dialog_box').modal();

        $('.dialog_open').click(function(e) {
             e.preventDefault();
             var id = $(this).attr('href').replace('#', '');
             $('#dialog_box_' + id).dialog('open');
        });
    });
</script>

Please note that I have never used the jQuery UI dialog box.

Hope it helps.

Upvotes: 1

eagerMoose
eagerMoose

Reputation: 1133

What happens is jQuery takes your dialog div out of the container div and puts it at the very bottom of your html body, and doesn't put it back on close. I think this is actually best practice when using jQuery dialog in general, otherwise you have to write some cleanup code to get your dialog div back in your container div.

If it's not absolutely necessary, I'd avoid having multiple dialog divs, there shouldn't be a need for them as you probably won't have multiple dialogs opened at once anyway.

Upvotes: 1

Related Questions