CODEWITHSUNDEEP
jqueryjquery-ui
1252748
1252748

Reputation: 15362

jquery ui dialog will not reopen once closed

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

Upvotes: 4

Views: 4439

Answers (4)

NicoJuicy
NicoJuicy

Reputation: 3528

You're current code is : 

$(".OpenDialogOnClick").dialog();

And just change it to:

$(".OpenDialogOnClick").clone().dialog();

Voila, you're HTML will never be destroyed / deleted again :)

Upvotes: 3

Ruben Infante
Ruben Infante

Reputation: 3135

If you do not mind creating a new dialog every time, you can essentially destroy your dialog and move the contents back to its previous location. That way on the next click, the process will repeat itself.

//jquery dialog functions
$(document).ready(function() {
    $(".add_shipping_address").click(function() {
        var sector = $(this).parents('.shipping_sector');
        sector.find(".shipping_dialog").dialog({
            close: function(event, ui) 
            { 
                $(event.target).dialog('destroy');
                $(event.target).appendTo(sector);
            }
        });
        return false;
    });
});

jsbin

Upvotes: 1

Nope
Nope

Reputation: 22329

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>

Upvotes: 4

Ruben Infante
Ruben Infante

Reputation: 3135

It may be that the parenting structure for the dialog has changed.

Try changing it to

//jquery dialog functions
$(document).ready(function() {
    $(".add_shipping_address").click(function() {
        //console.log($(this).parents('.shipping_sector'));
        $(".shipping_dialog").dialog();
        return false;
    });
});

jsbin

Upvotes: 1

Related Questions