jquery fancybox iframe change the href value dynamically

Question

I have a button that I click and I want the fancybox to load whatever content is needed depending on some checkboxes that I can check. Those checkboxes will alter the value of the url that needs to be displayed in the iframe within the fancybox.

So far I can get it to work once, when I change again the checkboxes I will see the url change on the html but the fancybox won't pop at all.

Here is my button and the link for the fancybox:

<button type="button" title="Compare" class="button">Compare</button>
<a class="comparefancy" style="display:none;" href="#"></a>

Here is what happens when I click the button:

jQuery(document).ready(function() {
        jQuery('.button').click(function(){

            var i=0;
            var prdString="";

            var prdString = jQuery.map(jQuery(':checkbox:checked'), function(n, i){
                  return n.value;
            }).join(',');

            var url='<?php echo Mage::getUrl('catalog/product_compare/index').'items/'; ?>'+ prdString + '/uenc/';

            jQuery('.comparefancy').attr('href', url);//this works all the time
            jQuery('.comparefancy').fancybox();  //this will only work the first time
            jQuery('.comparefancy').trigger('click');



    });

});

I've tried the beforeLoad method hinted at on some similar answers but it didn't work for me.

Edit: After testing this more I removed the display none from the link and made it visible and then did the following:

checked my checkboxes then clicked the button: the first fancybox loads just fine
checked other checkboxes, then clicked the button: the link will change its href but the fancy won't load.
click the link manually and then the fancybox loads the new url

So the problem is my trigger click function then? wtf?

try $().triggerHandler('click'); or look into the plugin, maybe the click event is in a namespace, so you have to write something like .trigger('click.fancy'). Also, have you tried setting the fancybox settings, i.e. iframe preload false like here: http://stackoverflow.com/questions/11956547/fancybox-beforeload-callback-javascript-jquery-and-referencing-this?rq=1 — Alex, Apr 25 '13 at 10:04
triggerHandler didn't work. I tried beforeLoad and that didn't work either. — Elaine Marley, Apr 25 '13 at 10:13
I think my problem is something like this: http://stackoverflow.com/questions/2038071/jquery-fancybox-triggered-click-only-working-once — Elaine Marley, Apr 25 '13 at 10:21

score 1 · Accepted Answer · answered Apr 25 '13 at 16:25

Maybe you don't actually need

<a class="comparefancy" style="display:none;" href="#"></a>

but try firing fancybox manually like :

jQuery(document).ready(function () {
    var i = 0; // inside the click will be always 0 ... to be or not to be
    jQuery('.button').click(function () {
        var prdString = jQuery.map(jQuery(':checkbox:checked'), function (n, i) {
            return n.value;
        }).join(',');
        var url = '<?php echo Mage::getUrl(' catalog / product_compare / index ').' items / '; ?>' + prdString + '/uenc/';

        // open the corresponding URL in fancybox
        jQuery.fancybox(url, {
            // API options
            padding: 0 // example
        });

    });
});

I am just suggesting the fancybox part only (moved the i variable out of the click though). Make sure that you get the expected url value for each checked checkbox with the parameters passed throught the .map() method.

score 0 · Answer 2 · answered Apr 25 '13 at 09:25

0

Dont bind the fancybox function again and again, once is enough:

(function($) {
    $(function() { // short for $(document).ready();
        $('.button').click(function() {
            var i = 0,
                prdString = $.map($(':checkbox:checked'), function(n, i){
                    return n.value;
                }).join(','),
                url = '<?php echo Mage::getUrl('catalog/product_compare/index').'items/'; ?>'+ prdString + '/uenc/';

                $('.comparefancy').attr('href', url);
                setTimeout(function() {
                    $('.comparefancy').click();
                }, 50);
        });

        $('.comparefancy').fancybox({
            // optional settings
        });
    });
})(jQuery);

answered Apr 25 '13 at 09:25

Alex

9,911
5
33
52

You are right, that wasn't fantastic of me but this didn't solve my problem, the second time I reselect checkboxes the fancybox won't load. – Elaine Marley Apr 25 '13 at 09:27
that's the problem, it doesn't say a thing. When it loads the first time I see all the get requests from the iframe, the second time it just ignores me (the url of the anchor link does change in the html though) – Elaine Marley Apr 25 '13 at 09:35
hm.. jQuery version? fancybox version? are you using the .click() or .trigger('click') handler? is the changed href url correct and valid? – Alex Apr 25 '13 at 09:39
well it's fancybox 2 and it's working as intended since the first time it fires fine. As you see in my code I use trigger click and the url is valid, it just adds different parameters. I'm not even getting the window with the "cannot load the content" message that you get when the url is wrong. JQuery is 1.7.1 – Elaine Marley Apr 25 '13 at 09:43
well thats pretty weird. could you try to use fancybox 1 for a test to see if it may be fb2? – Alex Apr 25 '13 at 09:44
One other thing could be your having display: none; - try visibility: hidden instead. Maybe we're lucky :) – Alex Apr 25 '13 at 09:46
AND maybe try this in your fancybox settings: .fancybox({ iframe: { preload: false } }); – Alex Apr 25 '13 at 09:47
Editing my question with new findings – Elaine Marley Apr 25 '13 at 09:49

jquery fancybox iframe change the href value dynamically

2 Answers2