jquery ui (v1.8.20) dialog - destroy not remove added ui element and not return the element back to its original position -
from read, $(#selector).dialog("destroy") supposed remove added jquery ui elements , return element, dialog attached to, original dom position. wrote test html , not doing either. in firebug, after clicked close, makes becomes invisible (display:none). doing wrong? below test html:
<html> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /> <style type="text/css"> .modaldialogpopup { display:none; border:1px solid #4f8cc5; } </style> <script src="/resources/default/1_0/js/jquery.js?v=081814" type="text/javascript" ></script> <script src="/resources/default/1_0/js/jquery-ui-1.8.20.custom.min.js?v=081814" type="text/javascript" ></script> <script> var testpopup = { popupid : '#testpopup', close: function() { $(this.popupid).dialog("close"); }, open: function() { $(this.popupid).dialog({ modal: true, autoopen: false, title: 'test outer pop up', dialogclass:'modaldialogpopup', resizable: true, close: function( event, ui ) { $(this.popupid).dialog( "destroy" ); alert('outer pop destroyed? '+$(testpopup.popupid).attr("class")); } }); $(this.popupid).dialog("open"); } } $(document).ready(function() { }); </script> </head> <body> <div id="outerdiv"> <a href="javascript:void(0)" onclick="testpopup.open(); return false;" >open popup</a> <div id="testpopup" class="modaldialogpopup"> <div id="testpopupdiv" style="overflow: auto; display: table;"> <div id="testpopupcontent" > pop test <br/> <br/> <a href="javascript:void(0)" onclick="testpopup.close(); return false;" >close popup</a> </div> </div> </div> </div> </body> </html>
found 2 problems cause destroy not working:
1) on line ==>
close: function( event, ui ) {$(this.popupid).dialog( "destroy" ); i shouldn't use this.popupid. should testpopup.popupid, below,
close: function( event, ui ) {$(testpopup.popupid).dialog( "destroy" ); once did that, starts remove added jquery ui elements. still not put element (id="testpopup") it's original dom position, resolved after done #2 below.
2) change jquery ui version jquery-ui-1.10.4.custom.min.js.
Comments
Post a Comment