Response title
This is preview!
Accessing selectors in a nested iframe - why is it a (timing) problem?
in Using jQuery
•
13 years ago
- I have a layout made of a few iframes nested in a "frameset" like top page.
- I would like to load jQuery (and all my other plugins) at the top level only.
- I'm accessing jQuery from each iframe by calling top.$
- I am selecting selectors in my iframe using top.$('#iframeid').contents().find('#id_in_iframe)
- These calls always fail, but in a debugger they sometimes work (timing?).
- I've minimized the sample, see the source code below.
- The bug manifests as: In the inner iframe, Try8_5CCCC.php, the first alert returns [Object], the div I'm looking for, but the next two alert return undefined.
I'm accessing the iframe selector from within the iframe's ready() function, so I'm sure it's loaded and ready.
Any ideas anyone?
Thanks, Adoram
UPDATE: for some reason the files were truncated.
I'm attaching them now and inserting it here, too.
- <?
- // Try8.php
- //----------
- ?>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>jQ Try 8 - Minimal</title>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
- </head>
- <body>
- <iframe src="Try8_5CCCC.php" id="5CCCCIframe" style="margin: 0; padding: 0;" width="100%" height="50%" frameborder=0></iframe>
- </body>
- </html>
- <?
- // Try8_5CCCC.php
- //---------------
- ?>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <script type="text/javascript">
- top.$(document).ready(function() {
- alert('N5Div is: '+top.$('#5CCCCIframe').contents().find('#N5Div'));
- alert('N5Div ID is: '+top.$('#5CCCCIframe').contents().find('#N5Div').attr('id'));
- alert('N5Div contetns are: '+top.$('#5CCCCIframe').contents().find('#N5Div').html());
- });
- </script>
- </head>
- <body>
- <div class="header"><big>Tasks and Events (5CCCC)</big></div>
- <div id="N5Div">
- <p>Sample text of the N5Div div here</p>
- </div pid="N5Div">
- </body>
- </html>
1