jQuery live() failing with jQuery UI datepicker

Question

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();

Stick an alert in there, I think you'll find that it's messing with the datepicker and the live is actually firing. — Nick Craver
– Nick Craver, Commented Mar 5, 2010 at 12:55
hit the exact same issue today - 2 years later - and this worked for me. Thank you for coming back and taking the time to add what worked for you. — jeremy
– jeremy, Commented Jul 31, 2012 at 23:17

Nick Craver · Accepted Answer · 2010-03-05 13:07:26Z

15

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.

answered Mar 5, 2010 at 13:07

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nick Craver Over a year ago

@Ed - In that case, is the lightbox fading, or re-sizing, any animation on close?

Ed James Over a year ago

yes, it fades out, however, this does not break any other datepickers (that are not in the lightbox) and I'm on jQuery 1.3.2

Nick Craver Over a year ago

@Ed - Can you post the code where you're re-appending to the page? lightbox should be doing this by itself, maybe something's getting lost there.

Ed James Over a year ago

@Nick there's quite a lot of it, so check out my answer to stackoverflow.com/questions/2027290/…

Ed James Over a year ago

@Nick Correct, hence the use of live(). I've actually fixed it now: it's the fact that the element still has hasDatepicker as a class messing with the initialisation process.

|

foxybagga · Accepted Answer · 2011-01-14 20:58:23Z

5

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

solved my issue

thanks!

answered Jan 14, 2011 at 20:58

foxybagga

4,2122 gold badges36 silver badges31 bronze badges

Comments

fringd · Accepted Answer · 2012-02-29 16:15:46Z

4

this worked for me

$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', ... });
$('input.date').live('focus', function() {
 $(this).datepicker().datepicker('show');
 true;
});

answered Feb 29, 2012 at 16:15

fringd

2,5381 gold badge19 silver badges14 bronze badges

Comments

Jonas Schubert Erlandsson · Accepted Answer · 2013-02-04 15:08:46Z

3

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
  });
});

edited Feb 4, 2013 at 15:08

Jonas Schubert Erlandsson

4,0601 gold badge26 silver badges37 bronze badges

answered Feb 4, 2013 at 14:41

poramo

5725 silver badges7 bronze badges

Comments

bruno · Accepted Answer · 2010-03-05 13:04:17Z

1

its possible that the datepicker is behind the box...

i had also the same problem a time ago.

put this in a css file, and that did the trick for me.

#ui-datepicker-div
{
    z-index:9999999;
}

answered Mar 5, 2010 at 13:04

bruno

1,8412 gold badges22 silver badges37 bronze badges

2 Comments

Ed James Over a year ago

nope, like I said, works the first time: I've already taken care of the z-index

Sanchitos Over a year ago

This works for me #ui-datepicker-div { z-index: 9999999 !important; }

Egglabs · Accepted Answer · 2011-02-03 11:05:31Z

1

$( "#datepicker" ).live('mousedown',function()
{
$(this).datepicker({ 
dateFormat: 'dd/mm/yy',
minDate: 0
});     
});

Try this ..

answered Feb 3, 2011 at 11:05

Egglabs

3,19610 gold badges35 silver badges48 bronze badges

Comments

roberthuttinger · Accepted Answer · 2011-07-06 21:14:20Z

I had the same issue but the problem was, I had many 'tiles' with start and end dates. I wasnt getting the results I needed because the id for each start date was the same, as well as the end date. Also with multiple date fields, I was getting the datePickers returned values all set to the first instance of a date field.

This code worked for me:

[IN HTML]

<label for="display_date">Display/Start Date</label><br />

<input type="text" class="dateStart" name="display_date" value="" /><br />

<label for="display_date_end">End Date</label><br />

<input type="text" class="dateEnd" name="display_date_end" value="" /><br />

[IN JAVASCRIPT INCLUDE]

// set the datePicker on the start and end fields

$('input.dateStart').datepicker({dateFormat:"yy-mm-dd", changeYear: true});

$('input.dateEnd').datepicker({

dateFormat:"yy-mm-dd",

changeYear: true,

beforeShow: function(){

var value = $(this).siblings('.dateStart').val();

$(this).datepicker('option', 'minDate', value);

}

});

I hope this helps someone else with the same issues!

bo huttinger

Community · Accepted Answer · 2017-05-23 12:22:36Z

0

You can try to use .livequery plugin

$('.jQueryCalendar').livequery(function() {

    // This will fire for each matched element.
    // It will also fire for any new elements added to the DOM.
    $(this).datepicker(options);
});

i found the answer here

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Feb 2, 2012 at 13:34

workdreamer

2,8861 gold badge37 silver badges37 bronze badges

1 Comment

Kwex Over a year ago

This did not work for me. I used fringd's post to overcome this challenge.

Collectives™ on Stack Overflow

jQuery live() failing with jQuery UI datepicker

8 Answers 8

7 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related