jQuery Forum

I'm trying to use  Datepicker + JqueryTools Overlay. Somehow the calendar is shown but after selected, the date is not pass it as value inside the input box and I got a javascript jqueryui error saying "o is undefined".

//Inclusion de jquery, jqueryui , jquerytools

1. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" type="text/css" media="screen" />
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
   
   <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
   
   <script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>

// Main html file, overlay instance (made with .live cause the triggers are loaded via ajax inside a YUI tab)

1. $(document).ready(function() {
   
       /*AJAX Error handler*/
       $(document).ajaxError(function(e, xhr, settings, exception) {
           alert('error in: ' + settings.url + ' \n'+'error:\n' + xhr.responseText );
       });
   
   
   });  // document readyState
   
   
   // Overlay
   $(function() {
   
       $("a[rel]").live('click', function(e) {
   
           // if the function argument is given to overlay,
           // it is assumed to be the onBeforeLoad event listener
           $(this).overlay({
   
               effect: 'apple',
   
   
               onBeforeLoad: function() {
   
                   $(".apple_overlay .contentWrap").html('<div style="height:422px;width:537px;background-color:#fff;text-align:center;position:relative;"><img style="position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;" alt="Loading..." src="/sitimages//processing.gif" /><br>Loading...Please Wait</div>');
   
                   // grab wrapper element inside content
                   var wrap = this.getOverlay().find(".contentWrap");
   
                   // load the page specified in the trigger
                   wrap.load(this.getTrigger().attr("href"));
               }
   
           });
           e.preventDefault();
       });
   
   });
   

//overlay div tags

1. <!-- Overlay -->
           <div class="apple_overlay" id="overlay">
           <!-- the external content is loaded inside this tag -->
              <div class="contentWrap"></div>
       </div>
   <!-- Overlay -->
   

// datepicker instance inside the second html file loaded inside the overlay via ajax

1. // Datepicker
   $(function(){
   
   $( "#valid_from,#valid_to" ).live('focus', function(e) {
   
           var dates = $(this).not('.hasDatePicker').datepicker({
               dateFormat: 'yy-mm-dd',
               defaultDate: "-2m",
               minDate: new Date(2011,1-1,1),
               maxDate: new Date(),
               changeMonth: true,
               numberOfMonths: 3,
               onClose: function() {
                   alert('ID:'+this.id+'\nValue:'+$(this).val());
               },
               onSelect: function( selectedDate ) {
                   alert(selectedDate);
   
               }
           });
       });
   
   
   });
   

// datepicker's range  inputs

1. <input type="text" id="valid_from" name="valid_from" size="20">
   <input type="text" id="valid_to" name="valid_to" size="20">
   

You can see here the overlay with the form and the datepicker opened (behind you can see the YUI tabs where the triggers for the overlay are)
Overlay Here

Then this a image with an alert showing the element id and it's value (I set this alert inside datepicker's onClose event)
Overlay with Alert Here

And finally this is the javascript error I got.
Javascript Error Here

Now I know this is an error triggered on datepcker when tryng to set the date,but I think the main problem should be in the overlay data cause it seems datepicker somehow doesn't know where to set the new value.

I'd appreciate any ideas on this.