I have two fields with datepicker inside a dialog. When I use them inside this dialog, everything works fine. The problem is when I close my dialog and re-open it to do other requests. My datepicker re-initialize whitout selecting any fields and do not close again.

I've tried to close it manually with the dialog's close property but when I re-open it, my datepicker does'nt open again.

Any idea?

3. My form
4. 
   
5. <div>
6.     <form onsubmit="return false;" id="formDialog">
7.       <input type="hidden" name="id" value="${id}"/>
8.       <input type="hidden" name="domain" value="${domain}"/>
9.       <label for="all">Period</label> <br>
10.       <input type="text" class="datePicker" name="startDate"/>&nbsp;to&nbsp;
11.       <input type="text" class="datePicker" name="endDate"/>
12.       <input type="submit" value="Search" class="btn"/>
13.     </form>
14.     <div id="formDataPanel">
15. 
    
16.     </div>
17. 
    
18. </div>
19. <asset:javascript src="jqueryui/jquery-ui.js"/>
20. <script type="text/javascript">
21. 
    
22.   $(".datePicker").datepicker({
23.     dateFormat:"dd/mm/yy",
24.     onClose: function () {
25.       $(this).datepicker('refresh');
26.     }
27.   });
28. 
    
29.   $("#formDialog").submit(function() {
30.       // $(".datePicker").datepicker("destroy")
31.       $.ajax(
32.         $("#appContext").val() + "myEndpoint",
33.         {
34.           data:$("#formDialog").serialize(),
35.           success: function(data, textStatus, jqXHR) {
36.             $("#formDataPanel").html(data)
37.           }
38.         }
39.       )
40.       return false;
41.   })
42. </script>

1. My other js file
3. //= require jqueryui/jquery-ui.js
4. //= require_self
5. 
   
6. function functionToRequest(domain, id) {
7. 
   
8.     $("#selector")
9.         .load($("#appContext").val() + "auditoria/domain?id=" + id + "&domain=" + domain)
10.         .dialog({
11.             modal:true,
12.             closeOnEscape:true,
13.             title:'MyTitle',
14.             width:'70vw',
15.             height:300
16.         });
17. }
18. 
    
19. jQuery(document).ready(function() {
20.     $("body").append("<div id=\"selector\"></div>")
21. })