JQuery Dialog - NOT OPENING Second Time - jquery-ui

Question

There are several posts on StackOverflow on the subject but none of the answers helped me.
I am using the DataList control that is populated by a SELECT through a DataAdapter.
A concept is recommended that only one instance of the dialog must be open but could not apply this method
The structure of the html is:
<asp:DataList ID="DataList" runat="server">
<ItemStyle />
<ItemTemplate>
<a href="" class="link"/></a>
<div class = "dialog" id="dynamicID" style="display:none">
</ div>
</ ItemTemplate>
</ asp: DataList>
The jQuery code I'm using is:
<script language="javascript" type="text/javascript">
$ (function () {
$ (". link. ") click (function () {
var id = '#' + ($ (this). siblings ('. dialog'). attr ('id'));
$ (id). dialog ({
AutoOpen: false,
closeOnEscape: true,
resizable: false,
draggable: false,
modal: true,
width: 800,
height: 600,
overlay: {backgroundColor: "# 000", opacity: 0.5},
top: 20,
show: 'fade',
hide: 'fade',
buttons: {
"Close": function () {
$ (id). dialog ('close');
}
}
});
$ (id). dialog ('open');
});
});
</ script>

Answer 1

Imagine this HTML
<asp:DataList ID="dataList" runat="server">
<ItemTemplate>
<div class="row">
<p>
Result: <strong>
<%# Container.DataItem.ToString() %></strong></p>
<a href="#" class="link" data-open="dialog_<%# Container.ItemIndex %>" />Click
To Open</a>
<div class="dialog" id="dialog_<%# Container.ItemIndex %>">
<h2>
This is the text inside the dialog #
<%# Container.ItemIndex %>.</h2>
<p>
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
with this javascript
$(function () {
// create dialogs
$(".dialog").dialog({
autoOpen: false,
closeOnEscape: true,
buttons: {
"Close": function () {
$(id).dialog('close');
}
}
});
// hook up the click event
$(".link").bind("click", function () {
// console.log($(this).parent());
// open the dialog
var dialogId = $(this).attr("data-open");
$("#" + dialogId).dialog("open");
return false;
});
});
works lovely.
Working example can be found here
What is wrong with your approach?
you are creating the dialog's inside a method, and this should be created inside the $(document).ready() so, everytime you click, it creates a dialog, but... it already exists and screws up everything.
When working with dialogs:
First you create them using .dialog()
You just need to use .dialog('open') to make that dialog visible
And use .dialog('close') to hide that dialog
by default jQuery UI CSS will hive the dialogs automatically (display:none;) so you don't need to do anything like that.

Answer 2

Usually just destroying the dialog on close will fix the issue.
$( "#dialogbox" ).dialog({
close: function (event, ui) {
$(this).dialog("destroy");
}
});

Answer 3

When dialog has displayed it fall out from the markup flow. So when you call var id = '#' + ($ (this).siblings('.dialog').attr('id')); you don't get anything. You can add dialog's id to array first time it opens and then if $(this).siblings ('.dialog') result is empty you may get dialog element id from array.
<script type="text/javascript">
var registeredDialogs = [];
function registerDialog(link, dialogDiv) {
var linkId = $(link).attr("id");
if (!registeredDialogs[linkId])
registeredDialogs[linkId] = dialogDiv;
}
function getDialog(link) {
var linkId = $(link).attr("id");
return this.registeredDialogs[linkId];
}
$(function () {
$(".link").click(function () {
var dialogDiv = $(this).siblings('.dialog');
if (dialogDiv.length !== 0) {
registerDialog(link, dialogDiv);
}
else {
dialogDiv = this.getDialog(link);
}
dialogDiv.dialog({
AutoOpen: false,
closeOnEscape: true,
resizable: false,
draggable: false,
modal: true,
width: 800,
height: 600,
overlay: { backgroundColor: "# 000", opacity: 0.5 },
top: 20,
show: 'fade',
hide: 'fade',
buttons: {
"Close": function () {
$(id).dialog('close');
}
}
});
$(id).dialog('open');
});
});
</script>