Tag: Facebox

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