Facebox is an interesting jquery plugin but it’s also one of those annoying things on the web that likes to break stuff around it. For my current project, I needed to use jQuery’s datepicker plugin with facebox. As expected, facebox broke datepicker :(. I wanted to try several other implementations but since jQuery’s datepicker was the simplest one I could find, I didn’t want to waste time trying make another script work. So I took a few minutes to debug my problem.
The problem:
Turns out that datequery relies on an elements ID. The problem? Facebox duplicates all the contents of the div you wanted to display and all hell breaks loose.
The solution:
Quite simple actually.
Just use jQuery to replace the element id within facebox at run time.
Here’s the script:
$(document).bind('reveal.facebox', function() {
$('#facebox .datepicker').each( function(intIndex){
$(this).attr('id',jQuery(this).attr('id') + '-2')
});
});
Then just modify your binding for datepicker accordingly:
$(document).bind('reveal.facebox', function() {
$('#date_filed_for-2').datepicker();
})
And you’re done. 😀
I found this code using google-fu on frenzicmojo.net
March 18, 2010 at 12:09 pm
hi
i used the same code donsn’t work the bind is very old and jquery is replaced with $ so if you have some time please update this article thanks 🙂
April 21, 2010 at 9:09 am
hi, this is just what i want to do!! but i don’t understand where i must put the code 🙁
i’m new in jquery… please, can you send me a .zip file with an example page what load facebox with a input field text with a datepicker selector? i’ll appreciate it! then i modify for my target! sorry for my english…
April 16, 2013 at 12:21 pm
hi i am rajeshkannan
i need to do facebox with datepicker.
If you have any examples can you give me.
Thanks in advance
March 23, 2013 at 2:35 am
You saved all of my hair, thank you 😀
June 4, 2013 at 9:00 am
Man, thank u very much … you saved me a lot of time.