Plugin won't work in a fancybox modal

Jun 5, 2011 at 9:38 PM


I've tried embedding the div into an HTML fragment (on the same page) that gets loaded up as a modal window via fancybox. Although the stars do show up, mousing over them has no effect, although strangely enough the cancel mouse-over works. Has anybody ever tried using this with a modal window a-la fancybox?

Jun 6, 2011 at 12:21 PM

Could you post your code, perhaps in jsfiddle?

Jun 6, 2011 at 12:30 PM
Edited Jun 6, 2011 at 12:32 PM


Jun 6, 2011 at 1:34 PM

how does it work? when do I get the fancybox?

Jun 6, 2011 at 2:07 PM

Sorry my snafu. Use and click anywhere on the map

Jun 6, 2011 at 6:25 PM

nothing happens when i click on the map (chrome 11, ie9)

Jun 7, 2011 at 6:25 AM

In JsFiddle it didn't work, but locally it did.

I found the problem, and have a solution for you.
The problem is that fancybox, takes the html of your div, and then creates a new element. So any javascript binding are only on the original div, and not in your fancybox,

So part one of your solution is in your "submitGarage" function:


    function submitGarage(location) {
        jQuery(document).ready(function() {
            $.fancybox($("#garage_form_container").html(), {
                'autoDimensions' : true,
                'width' : 'auto',
                'height' : 'auto',
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                onComplete: function(e) { $('.rateit').rateit();  } //new, when the fancybox is loaded init the rateit plugin


Now the problem is that when doing so, also the original rateit plugin is rebound, so next time you'll get two rateit plugins, and then 3 etc. etc.

So what we have to do is a simple trick, taking  the original div out of the dom:


<div style="display: none;" id="garage_form_container">


<script type="text/html" id="garage_form_container">

this is perfectly legal.