sylv3rblade dot com

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