StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFancybox 'iframe' in AJAX loaded page
primarykey
Id
8762058
data
AcceptedAnswerId
8845168
AnswerCount
4
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2012-01-06T17:42:42.797
FavoriteCount
0
LastActivityDate
2013-01-17T19:33:18.670
LastEditDate
2013-01-17T19:33:18.670
LastEditorUserId
1176000
OwnerUserId
973397
ParentId
0
PostTypeId
1
Score
2
ViewCount
3473
LastEditorDisplayName
text
Body
<p>I've seen a few similar posts to my problem, but none that have helped me solve it yet.</p> <p>I have an index.php with a AJAX jQuery UI menu calling .html files brought in via AJAX when clicked.</p> <p>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.</p> <p>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.</p> <p><strong>Does anyone know how I can use fancybox via iFrame within AJAX loaded pages?</strong></p> <p><strong>! UPDATE JAN 9, here's what I'm trying now & still failing (please help!):</strong></p> <pre><code><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> </code></pre> <p><em>Below is full code -----------</em></p> <p>Here's my index.php markup:</p> <pre><code><!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>  <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>  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; }  #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; }  </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> </code></pre> <p>Here's the code I have near the initial head in each AJAX .html page.</p> <pre><code><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">  <script type="text/javascript"> $(document).ready(function() { /* * Examples - various */ $("#various7").fancybox({ 'width' : '95%', 'height' : '95%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); </script>  </code></pre> <p>And calling to action with:</p> <pre><code><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> </code></pre>
Tags
<jquery><html><css><ajax><jquery-ui>
Title
Fancybox 'iframe' in AJAX loaded page
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USMartín Canaval
UserOwnerUserId
1. USNo-Spex
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POFancybox 'iframe' in AJAX loaded page
  UserUserId
  USNo-Spex
  VoteTypeVoteTypeId
  VTBountyStart
2. VO
  singulars
  PostPostId
  POFancybox 'iframe' in AJAX loaded page
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
3. VO
  singulars
  PostPostId
  POFancybox 'iframe' in AJAX loaded page
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. CODo you have a live link for us to play with? When you are loading in the new pages in AJAX, are you replacing the whole document (head and body), the body or just the respective content?
  singulars
  PostPostId
  POFancybox 'iframe' in AJAX loaded page
  UserUserId
  USMy Head Hurts

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.