Pete,
I had the same problem.
I was using a id for the dialog container and I was getting several
target tags with the same id. Jquery was not happy with the duplicate
ID's it would only work on the first id it encountered.
I found duplicates were being created even though the destroy function
was used in the reload script and on the close button.
I finally ended up manually destroying the duplicates:
success: function(msg){
//remove all duplicates
$('.ui-dialog').remove();
$('.container').remove();
//recreate the target tag
$('#general_info').append("<div
class='container'></div>");
//fill the target tag
$('.container').html(msg);
//open the dialog box
$('.container').dialog('open');
if(!$('.container').dialog('isOpen')) {
$('.container').dialog({ width:
800, modal: true, draggable:
true, closeOnEscape: true, buttons: { "Cancel": function() { $
(this).dialog('destroy'); } } });
}
I hope that it helps. I think the destroy should do this automatically
too. Or better yet, not make the duplicates in the first place.
Joshua
On Oct 28, 6:28 am, Pete <[email protected]> wrote:
> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
