Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery live() failing with jQuery UI datepicker

Ok, I'm trying to use the FaceBox() plugin for jQuery along with the jQuery UI datepicker().

I've got it to bind to the lightbox'd inputs on the first appearance of the lightbox, but it's not working afterwards.

I'm doing the following:

$(function() { 
    $('.jQueryCalendar').live('click', function () {
            $(this).datepicker({showOn: 'both'}).focus();
    });
});

When the lightbox closes, I'm re-appending it's content to the page (in order to not lose the content div), and this seems to be killing the live() call. [NB the re-appending takes place after the original content is destroyed]

EDIT

Ok, the live() event IS firing (thanks to Nick Craver for that), however the datepicker is no longer being shown. Does anyone have an idea why?

EDIT #2

Ok, the use of .html() to re-append causes the events to need rebinding, but the element to bind still has the class hasDatepicker, which messes with the datepicker() initialisation.

To fix, simply user

$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

like image 329
Ed James Avatar asked Mar 05 '10 12:03

Ed James


4 Answers

Try this and see what happens:

$(function() { 
    $('.jQueryCalendar').live('click', function () {
            $(this).datepicker('destroy').datepicker({showOn: 'both'}).focus();
    });
});

If you're using jQuery UI 1.7.2 with jquery 1.4, some effects destroy widgets, it fading, etc may be causing datepicker issues. jQuery UI 1.8 fixes this, it's at RC3 Status at the moment.

like image 190
Nick Craver Avatar answered Oct 14 '22 08:10

Nick Craver


$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

solved my issue

thanks!

like image 23
foxybagga Avatar answered Oct 14 '22 08:10

foxybagga


this worked for me

$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', ... });
$('input.date').live('focus', function() {
 $(this).datepicker().datepicker('show');
 true;
});
like image 4
fringd Avatar answered Oct 14 '22 08:10

fringd


This worked for me:

$('.datepicker').live('mousedown', function(){
  $(this).datepicker({
    dateFormat: 'mm/dd/y
  });
});

Not how ever that .live() has been removed from jQuery as of 1.9 and should be replaced by .on(). Using the new syntax you would get:

$(document).on('mousedown', '.datepicker', function(){
  $(this).datepicker({
    dateFormat: 'mm/dd/y
  });
});
like image 3
poramo Avatar answered Oct 14 '22 08:10

poramo