Jquery ui dialog won't open after close
I am trying to implement jquery ui dialog. Using this code as a base, I succeeded. But I would rather use element classes instead of IDs. So I modified the code:
$(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 for the first time, but once it is closed it will not open again. Whereas it works as expected in the original example. How did I damage it?
source to share
The way jQuery dialogs work is they take the HTML for the dialog from the current location in the DOM and put a new one div
at the bottom of the DOM. When you open the dialog, your new location is determined as shown below.
so your HTML is not where it was and your selector using find
won't find anything.
You need to either use id
or the class name directly, but if you have multiple elements with that class you are better off using IDs.
What we are doing in our project, we are creating a new div with an id specifically for the dialog, then we know what it is. You can either place your actual content in a new container, or you can clone()
place it inside. Similarly:
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 need to rebuild your code a bit to handle this.
Also, when the dialog is destroyed, it doesn't move the HTML back where it found it, so we have to manually return it. Please be aware that we are using jQuery 1.7 and I don't know if this is the same issue in 1.9.
Dialogs are pretty tricky, but if you use something like the above where you create a custom one div
, for example, and give it a unique ID, you have a lot of freedom.
What your new HTML looks like when you open a dialog:
<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>
source to share
Perhaps the parental control structure for the conversation 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;
});
});
source to share
If you don't mind creating a new dialog every time, you can essentially destroy your dialog and move the content back to its original location. Thus, the next click, the process will be repeated.
//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;
});
});
source to share