SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery Datepicker: doesn't work on initial focus

    This is frustrating! I'm using the stock jQuery UI Datepicker; it will open on click, but not on focus. What's strange is, if I tab through the entire page and come around to the target field again, it <em>does</em> open! Here's my HTML:

    Code HTML4Strict:
                        <ul>
                            <li class="black bold">
                                <label for="datepickX" class="labelDatefield">Select activation date for [ProductX]:</label>
    <input type="text" id="datepickX" class="datefield" />
    <span class="spanConfirmDate" style="font-weight: normal; font-style: italic;"></span> 
                            </li>
                            <li class="black bold end">
                                <label for="datepickY" class="labelDatefield">Select activation date for [ProductY]:</label>
    <input type="text" id="datepickY" class="datefield" />
    <span class="spanConfirmDate" style="font-weight: normal; font-style: italic;"></span> 
                            </li>
                        </ul>

    ...And here's the JavaScript:

    Code JavaScript:
          <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
          <!-- Add JavaScript for jQuery datepicker -->
          <script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
     
          <script type="text/javascript">
            jQuery(document).ready(function(){
                /* jQuery datepicker functions */
                jQuery('.labelDatefield').focus(function() {
                    var self = jQuery(this);
                    jQuery(self).next('input').datepicker({numberOfMonths:2});
                });
                jQuery('.labelDatefield').click(function() {
                    var self = jQuery(this);
                    jQuery(self).next('input').datepicker({numberOfMonths:2});
                });
                jQuery('input.datefield').focus(function() {
                    jQuery(this).datepicker({numberOfMonths:2});
                });
                jQuery('.datefield').mousedown(function() {
                    var self = jQuery(this);
                    jQuery(self).datepicker({numberOfMonths:2});
                });
                jQuery('.datefield').keydown(function() {
                    var self = jQuery(this);
                    jQuery(self).datepicker({numberOfMonths:2});
                });
                jQuery('.datefield').change(function() {
                    var self = jQuery(this);
                    if (jQuery(self).val().length == 10) {
                        var strVal = 'This software will be activated on ' + jQuery(self).val() + '.';
                        jQuery(self).next('span').html(strVal);
                    } else {
                        jQuery(self).next('span').html('Please click in the field and use the dropdown calendar to pick a date.');
                    }
                });
                /* end jQuery datepicker functions */
    });
    </script>

    I'm stumped; any suggestions? TIA!

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure why that wouldn't work, but I noticed that you keep doing this:

    Code JavaScript:
    var self = jQuery(this);
    jQuery(self)...

    There's no need to use the extra variable self. The only reason you would need to do that is if you need a reference to what 'this' currently points to because you want to use it in a context where 'this' is set to something else. That's not the case here, so you don't need to do that. Unless of course you want to type 'self' rather than having to type jQuery(this) repeatedly, in which case you don't need to wrap self in a call to the jQuery() function since it's already set equal to a jQuery object.

  3. #3
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I hear you; it was kind of a "belt and suspenders" approach, just in case something unforeseen was happening elsewhere. :-)

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ok, I see.

    I guess my only other suggestion would be that I just noticed you're using outdated versions of both jQuery and jQuery UI, which are now in versions 1.6.2 and 1.8.14, respectively, compared to the versions you have, which are 1.4.2 and 1.7.3, respectively.

    The outdated jQuery version probably isn't affecting anything (though upgrading it is probably a good idea anyway), but there may be a bug related to the problem you're having in the jQuery UI code which may be fixed in the current version of jQuery UI. So I'd suggest you update to the latest version of jQuery UI first and see if you're still having the same problem.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •