get next or live element with jQuery find

Question

Alright, not sure if find() will be the correct method for this. I am using pretty photo and I am loading some inline content. Basically when pretty photo launches, it clones what is defined inline and displays it in the lightbox.

The issue here is I cannot call $("#myTextField").datepicker(); to activate a jQuery UI Datepicker on a text box. The reason being is it applies it to the invisible one I originally wrote, not the cloned one that is visible. I ran into this issue before with the Submit button in the inline content which I solved by using $("#mySubmitButton").live('click',function().....

I tried $(this).find("#myTextField").next().datepicker(); but no dice. Any other suggestions? I dont know how else I could use the live() method.

I managed to get the datepicker pop up, except the datapicker isn't inserting the date when I click on a number. I am assuming its putting it in the original invisible content `$("#shoot_date").live("focus",function(){$(this).datepicker();});` — Ronnie, Dec 22 '11 at 23:29
Check-out `.delegate()`, `.live()` has been depreciated as of jQuery 1.7: http://api.jquery.com/delegate — Jasper, Dec 22 '11 at 23:34

sasa · Answer 1 · 2011-12-23T00:03:54.110

1

That is because event for datepicker is not attached on any cloned element.

You can use prettyPhoto method changepicturecallback, to bind datepicker on cloned element. (based on documentation)

$("a[rel^='prettyPhoto']").prettyPhoto({
    changepicturecallback: function(){/* Called everytime an item is shown/changed */
        $("#myTextField").unbind("datepicker"); // this will unbind previous binded event
        $("#myTextField").datepicker(); // bind new event
    }
});

Or, try to add $("#myTextField").datepicker(); inside inline element. Of course, in script tag. When prettyPhoto launchs, it will bind that event.

edited Dec 23 '11 at 00:03

answered Dec 22 '11 at 23:46

sasa

2,443
5
23
35

while the callback does get called in prettyphoto, the unbind and datepicker methods are still not created. I think they are still referencing the original content and not the cloned content – Ronnie Dec 23 '11 at 00:06
Do you use ID as selector or class? Try $('.pp_content_container .date_class').unbind("datepicker").datepicker(); – sasa Dec 23 '11 at 00:17
1

ok that worked, however, none of the events on the calendar are working. When I try and select a date, I get the error `Uncaught TypeError: Cannot set property 'currentDay' of undefined`. I am thinking I need to go a different route for this to work – Ronnie Dec 27 '11 at 17:55
I get the same result if I just did: `$("#shoot_date").live("focus",function(){$(this).datepicker();});`. Same error that is – Ronnie Dec 27 '11 at 17:57

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Alright I figured it out via: Jquery datepicker does not work inside lightbox

$("#shoot_date").live("focus",function()
{
    $(this).attr("id","datepickerNEWID");                 
    $(this).datepicker();
});

edited May 23 '17 at 11:59

Community

1
1

answered Dec 27 '11 at 18:06

Ronnie

11,138
21
78
140

score 0 · Answer 3 · answered Dec 22 '11 at 23:31

0

Instead of using an id selector like "#myTextField", consider using a class selector like ".dateField".

Having multiple elements on the same page with the same id is likely the source your trouble.

answered Dec 22 '11 at 23:31

Tarik

118
1
10

score 0 · Answer 4 · answered Dec 22 '11 at 23:33

If you know the HTML structure of "Pretty Photo" (you can find this using FireBug or any other developer tools) then you can create a selector that finds the cloned element within the "Pretty Photo" element:

$('#pretty-photo-id').find('input[type="text"]').datepicker();

This is most likely not optimized for your situation but with the info I have this is about as specific as I can get.

get next or live element with jQuery find

4 Answers4