Hello
I encountered a bit of weird behaviour with the ui.dialog element. I
tried to report it to trac but the page gave me an internal error, so
this was the next best place that I found.
Here is the scenario:
I have a dialog that I want to init only when the dialog is needed to
be opened.
So I init it when Its opened and destroy it when it's closed.
destroy methods definition is: "Remove the dialog functionality
completely. This will return the element back to its pre-init state."
However this dialog is inside an element that is reloaded with ajax.
After an reload, the init call opens the same dialog twice, and after
the next reload three times and so on.
I can fix this by using jquerys .eq(0) method for the selected
elements before .dialog() call or by moving the dialog content div
outside the element that gets reloaded.
To me this seems to conflict with the destroy method's definition?
Here is the reduced code for this case, so you can try it out:
bugtest.html file contents:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/no-theme/jquery-
ui-1.7.2.custom.css" />
</head>
<body>
<button onclick="test.reload();return false;">reload</button>
<div class="container">
<button onclick="test.dia();return false;">create dialog</button>
<div class="test-dialog" title="test title">
<p>
test
</p>
</div>
</div>
<pre><script src="js/jquery-1.3.2.min.js"></script></pre>
<pre><script src="js/jquery-ui-1.7.2.custom.min.js"></script></pre>
<pre><script src="bugtest.js"></script></pre>
</body>
</html>
and bugtest.js file contents:
var test = {
// Inits a dialog.
dia : function() {
var dialog = $('.test-dialog');
var buttons = {};
// Define buttons.
buttons['destroy'] = function() {
$(this).dialog('destroy');
};
return dialog.dialog({
bgiframe: true,
autoOpen: false,
height: 200,
width: 300,
resizable: false,
modal: true,
buttons: buttons
}).dialog('open');
},
// Simulates an ajax call replacing the containers contents.
reload: function() {
var html = '<button onclick="test.dia();return false;">reloaded
create dialog button</button>' +
'<div class="test-dialog" title="test
title">' +
'<p>test duplicate</p></div>';
$('.container').html(html);
}
}
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
