jquery ui dialog will not reopen once closed

Question

I'm trying to implement a jquery ui dialog. Using this code as a base, I've succeeded. But I would rather use elements' classes instead of IDs. I therefore modified the code to this:

$(document).ready(function() {
    $(".add_shipping_address").click(function() {
        console.log($(this).parents('.shipping_sector')); //correctly returns the parent fieldset
        $(this).parents('.shipping_sector').find(".shipping_dialog").dialog();
        return false;
    });
});

The dialog works the first time, but once it is closed, it will not open again. Whereas it works as expected in the source example. How have I damaged it?

jsbin

Answer 1

The way jQuery dialogs work is that they take the HTML for the dialog out of the current location in the DOM and place a new div at the bottom of the DOM. When you open your dialog your new location is defined as seen below.

therefore your HTML is not where it was and your selector using find is not going to find anything.

You have to either use id or the class name directly but if you got multiple elements with that class you are better of using identifiers.

What we do in our project we craft a new div with an id specifically for the dialog, then we know which one it is. You can the either place your actual content into the new container or clone() it and place it inside. Similar to this:

var $dialog = $('<div id="dialog-container"></div>')
var $content = $(this).parents('.shipping_sector').find(".shipping_dialog");

var $clonedContent = $(this).parents('.shipping_sector').find(".shipping_dialog").clone() // use clone(true, true) to include bound events.

$dialog.append($content); // or $dialog.append($clonedContent);

$dialog.dialog();

But that means you also have to slightly restructure your code to deal with that.

In addition when the dialog is destroyed it does not move the HTML back again where it found it so we manually have to put it back. Mind you we are using jQuery 1.7 and I don't know if that is still the same issue in 1.9.

Dialogs are quite tricky to deal with but if you use something similar to the above whereby you create a custom div for example and give it a unique id you have a lot of freedom.

What your new HTML looks like when dialog is opened:

<div style="display: block; z-index: 1003; outline: 0px; position: absolute; height: auto; width: 300px; top: 383px; left: 86px;"
class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-1">Contact form</span>
        <a
        href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span>
            </a>
    </div>
    <div class="shipping_dialog ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 91.03125px; height: auto;"
    scrolltop="0" scrollleft="0">
        <p>appear now</p>
    </div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"
    style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
</div>