Plugin won't work in a fancybox modal

Jun 5, 2011 at 10:38 PM

Hello,

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?

Coordinator
Jun 6, 2011 at 1:21 PM

Could you post your code, perhaps in jsfiddle?

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

Sure

http://jsfiddle.net/5WbyW/1/

Coordinator
Jun 6, 2011 at 2:34 PM

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

Jun 6, 2011 at 3:07 PM

Sorry my snafu. Use http://jsfiddle.net/5WbyW/7/ and click anywhere on the map

Coordinator
Jun 6, 2011 at 7:25 PM

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

Coordinator
Jun 7, 2011 at 7: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:

Replace 

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

with:

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

this is perfectly legal.