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

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -