Reputation: 8274

Fancybox 'iframe' in AJAX loaded page

I've seen a few similar posts to my problem, but none that have helped me solve it yet.

I have an index.php with a AJAX jQuery UI menu calling .html files brought in via AJAX when clicked.

Within the .html files (4) I'm trying to use one fancybox via the iFrame technique. Once it's clicked on the initial homepage (displayed through first .html) the fancybox works fine. But when you click to another button on the menu that loads another .html page, the fancybox does not work. And after when you navigate back the home page where it worked on initial page load, it doesn't work again.

I've tried debugging by moving all the jQuery libraries calls and related CSS and inline JS to the main index.php page, the site then broke. Then I tried just loading the libraries there and trying to initiate with the inline JS in each individual AJAX called .html. Then tried a few more variations of these types of debugging and still nothing.

Does anyone know how I can use fancybox via iFrame within AJAX loaded pages?

! UPDATE JAN 9, here's what I'm trying now & still failing (please help!):

<script type="text/javascript">
    $(document).ready(function() {
        /*
         *   Examples - various
         */
        $('#various7').load(toLoad,'',showNewContent);

        $("#various7").fancybox({
            'width'                         : '95%',
            'height'                        : '95%',
            'autoScale'                     : false,
            'transitionIn'                  : 'none',
            'transitionOut'                 : 'none',
            'type'                          : 'iframe'
        });

    });
</script>

Below is full code -----------

Here's my index.php markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>American Grown - in dev</title>

    <link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/css/mainstyles.css">
    <link rel="stylesheet" href="css/jquery.ui.all.css">

    <script src="http://jqueryui.com/jquery-1.6.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>


<!--[if lte IE 7]>
<meta http-equiv="refresh" content="0; url=http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html" />
<script type="text/javascript">
/* <![CDATA[ */
window.top.location = 'http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html';
/* ]]> */
</script>
<![endif]-->

    <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>

<style>

<!--Inline Styles to override UI theme-->

h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925; }
h2 { font-family: Georgia, Regular; font-size: 20px; color: #000; line-height: 30px;}
p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px;}

p.buyhead { font-family: Georgia, Regular; font-size: 18px; color: #000; padding: 4px; line-height: 25px; font-weight: bold;}

.ui-tabs .ui-tabs-nav {
margin:0;
}

.ui-widget-header {
border:1px solid #AAAAAA;
color:#222222;
font-weight:bold;
}

.ui-tabs .ui-tabs-nav li {
border-bottom:0 none !important;
float:left;
list-style:none outside none;
margin:0 2.2em 1px 0;
padding:0;
position:relative;
white-space:nowrap;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url("select state") repeat-x scroll 50% 50% #FFFFFF;
border:1px solid #AAAAAA;
color:#212121;
font-weight:normal;
}

.ui-tabs .ui-tabs-nav {
margin:0;
padding:0;
}

.ui-widget-header {
background: none;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0; }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    padding-bottom: 0px;
}

.ui-widget-header {
    border: 0;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background: none;
}

.ui-state-default, .ui-state-default, .ui-widget-header .ui-state-default {
background: none;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: 0.5em 1.1em;
}

<!--Using CSS sprites-->

#nav-example, #tabs {
    background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") no-repeat;
    width: 760px;
    height: 42px;
    padding: 0;
    padding-top: -2px;
}

#nav-example li, #nav-example a {
    height: 41px;
    display: block;
    width:214px;
}

#nav-example li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#nav-example-01 { width: 210px; }
#nav-example-02 { width: 210px; }
#nav-example-03 { width: 210px; }

#nav-example-01 a:hover, a:active { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") 0px -50px no-repeat; }
#nav-example-02 a:hover, a:active  { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") -255px -50px no-repeat; }
#nav-example-03 a:hover, a:active  { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") -500px -50px no-repeat; }

<!--End Inline Styles to override UI theme-->

</style>

</head>

<body style="background-color: #FFFDEF;">

<div id="pagewrap" style=" background-color: #fff; width:800px; height: 1200px; margin: 0 auto; border-right: 1px solid #cccc99 ;border-left: 1px solid #cccc99;">

<div id="headerbox">

<center><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/Header.gif" style="padding:40px;" border="0"></center>

</div>

<div class="demo" style="margin-left: 18px; margin-top: -16px;">

<div id="tabs" style="border-top:1px solid #CCCC99; border-bottom: 1px solid #CCCC99; border-right:0px; border-left:0px; height: 48px;"> 
    <ul id="nav-example">
        <li id="nav-example-01"><a class="item1" href="ajax/content1.html">About the Book</a></li>
        <li id="nav-example-02"><a class="item2" href="ajax/content2.html">Join us on Facebook</a></li>
        <li id="nav-example-03"><a class="item3" href="ajax/content3.html">Get email Updates</a></li>
    </ul>
    <div id="tabs-1">

    </div>
</div>
</div>
</div>

</body>
</html>

Here's the code I have near the initial head in each AJAX .html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>

<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen">


    <!--JS for Fancybox iFrame buybtn-->

<script type="text/javascript">
                $(document).ready(function() {
                        /*
                        *   Examples - various
                        */

                          $("#various7").fancybox({
                                'width'                         : '95%',
                                'height'                        : '95%',
                                'autoScale'                     : false,
                                'transitionIn'          : 'none',
                                'transitionOut'         : 'none',
                                'type'                          : 'iframe'
                        });

                });
</script>

<!--End JS for Fancybox iFrame buybtn-->

And calling to action with:

<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" style="margin-top:-50px;"
" border="0"></a>

Upvotes: 2

Answers (4)

Jacob Thomason

Reputation: 3411

You need to bind the event handler to a current DOM element on that page (the same that the js is loaded into). If you're loading the js into the iframe, you'll need to reload the javascript as well. The js sets up the event handler. And if you're changing the DOM around without reloading the js to re-setup that event handler, none will be set.

To get around this you need to delegate the binding to a parent DOM element that doesn't leave the DOM on an ajax reload, check out jQuery .on() for 1.7+ or .delegate() for < 1.7.

Hope this helps.

Upvotes: 0

alex

Reputation: 580

This happens because the fancybox will not initiate when the ajax call is triggered.

Try moving the fancybox code in each AJAX .html page after the "a" tag which calls the fancybox.

Try something similar to this.

<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" style="margin-top:-50px;" border="0"></a>
<script type="text/javascript">
$(document).ready(function() {
                      $("#various7").fancybox({
                            'width'                         : '95%',
                            'height'                        : '95%',
                            'autoScale'                     : false,
                            'transitionIn'          : 'none',
                            'transitionOut'         : 'none',
                            'type'                          : 'iframe'
                    });

            });
</script>

Upvotes: 1

AdmanStrong

Reputation: 323

The issue may have to do with the link you which to become a fancybox not being created yet when you're calling the fancybox command in javascript on the Ajax loaded pages.

Try calling the .fancybox() call on an ajax callback function once the new tab page has loaded?

Upvotes: 0

Tim

Reputation: 1039

There is a project available, fancyboxCallingInsideIframe, that may help you.

Upvotes: 1

Fancybox &#39;iframe&#39; in AJAX loaded page

Answers (4)

Related Questions

Fancybox 'iframe' in AJAX loaded page