Accessing selectors in a nested iframe - why is it a (timing) problem?

Accessing selectors in a nested iframe - why is it a (timing) problem?

  1. I have a layout made of a few iframes nested in a "frameset" like top page.
  2. I would like to load jQuery (and all my other plugins) at the top level only.
  3. I'm accessing jQuery from each iframe by calling top.$
  4. I am selecting selectors in my iframe using top.$('#iframeid').contents().find('#id_in_iframe)
  5. These calls always fail, but in a debugger they sometimes work (timing?).
  6. I've minimized the sample, see the source code below.
  7. 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've heard people say "it's jQuery's bugs with iframes" or "it's a loading timing issue", but I don't believe jQuery has such fundamental bugs.
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.

  1. <?
  2. // Try8.php
  3. //----------
  4. ?>
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <title>jQ Try 8 - Minimal</title>
  9. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  10. </head>
  11. <body>
  12. <iframe src="Try8_5CCCC.php" id="5CCCCIframe" style="margin: 0; padding: 0;" width="100%" height="50%" frameborder=0></iframe>
  13. </body>
  14. </html>
  15. <?
  16. // Try8_5CCCC.php
  17. //---------------
  18. ?>
  19. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  20. <html>
  21. <head>
  22. <script type="text/javascript">
  23.     top.$(document).ready(function() {
  24.       alert('N5Div is: '+top.$('#5CCCCIframe').contents().find('#N5Div'));
  25.       alert('N5Div ID is: '+top.$('#5CCCCIframe').contents().find('#N5Div').attr('id'));
  26.       alert('N5Div contetns are: '+top.$('#5CCCCIframe').contents().find('#N5Div').html());
  27.     });
  28. </script>
  29. </head>
  30. <body>
  31. <div class="header"><big>Tasks and Events (5CCCC)</big></div>
  32. <div id="N5Div">
  33. <p>Sample text of the N5Div div here</p>
  34. </div pid="N5Div">
  35. </body>
  36. </html>