jQuery: The Write Less, Do More JavaScript Library

|

»

jQuery UI Discussion

Dialogs and ajax reloading results in duplicate dialogs

View: New views

3 Messages — Rating Filter: Alert me

	Dialogs and ajax reloading results in duplicate dialogs by Pete-127 :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message 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-ui@.... To unsubscribe from this group, send email to jquery-ui+unsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
	Re: Dialogs and ajax reloading results in duplicate dialogs by Joshua-43 :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message 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 <petri.ro...@...> 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 jquery-ui@.... To unsubscribe from this group, send email to jquery-ui+unsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
	Re: Re: Dialogs and ajax reloading results in duplicate dialogs by Richard D. Worth-2 :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message On Thu, Nov 5, 2009 at 12:05 PM, Joshua <ksteinme@...> wrote: 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. It's as simple as calling $(this).remove() instead of $(this).dialog('destroy'). As documented, the destroy method removes only the plugin instance, leaving the original element in the DOM. If you don't want the element in the DOM, .remove() it, and it will automatically call .dialog('destroy'). - Richard Joshua On Oct 28, 6:28 am, Pete <petri.ro...@...> 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 jquery-ui@.... To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en. -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery-ui@.... To unsubscribe from this group, send email to jquery-ui+unsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.