Javasript and Iframe Interaction on a PHP Page

I have a weird problem that has presented itself. I have some Javascript loading on a PHP through a Function/Load into a div layer. On the pages that have an Iframe, the Javascript usually loads without a problem. On the pages that don't have an Iframe, it doesn't load at all. I have trouble-shot it down to the Iframe and that's where the trail goes cold. Any ideas?
wallaceds77Asked:
Who is Participating?
 
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,
you have a "loading" problem here.

Your whole problem is on the last line of the clocks.js file and the assumptions you're making with it.

I'll go straight to the simple solution:
Currently you're including the clocks.js script in the header of the clocks.php page
move it last line before the </body> of that page:
<script src="js/clocks.js"></script>
</body>

Open in new window

and get rid of the window.onload instruction in the clocks.js.
Replace that line with:
worldClockZone();

Open in new window


Now the explanation:
You're "injecting" the clocks.php into the main page via ajax call (jquery load) but expect it to behave properly with the window.load of the main page.
As ajax calls are asynchronous, so when the clocks.js executes, the GMT element doesn't exist yep in the page.
You can see this error in the dev tools console.
Moving the scripts to the end of the page makes sure that the HTML is parsed before the javascript execution. Like this we don't need to rely on window.onload events (which btw, differ from browser to browser).

Alternative solution:
Use the callback function of the $().load function. Documentation
To make this work you need to get rid of that window.onload line all together and replace the
$("#time").load("clocks.php");

Open in new window

by
$("#time").load("clocks.php", worldClockZone);

Open in new window


I can't really test this but it should all work :)

Cheers!
0
 
Dave BaldwinFixer of ProblemsCommented:
No, you need to give a link at least so we can check it out.  Basically, iframes and javascript have nothing to do with each other unless you have programmed some interaction.
0
 
Ray PaseurCommented:
Please tell us the browser and give us a link to your demonstration example, thanks.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
wallaceds77Author Commented:
Hi, sorry for the lack of example information. My test site is located at:  

http://severeweathercenter.com/rwd/

You'll notice that the About, Safety Tips and Disaster Kit links are somehow not playing well. The Javascript clocks at the top of the page aren't loading properly. Those same clocks are loading on the Iframe pages including the Index/Home, Tornado Warnings, Radar, and all the Mesoscale Analysis pages. AS far as I can tell, everything is identical with the exception of the Iframe.
0
 
Dave BaldwinFixer of ProblemsCommented:
'clocks.php' loads fine all by itself.  But 'clocks.js' is only found on the main page, not on the 'About' page.  You do have a duplicate id="wrapper" which can cause problems with javascript which expects 'id's to be unique.  And you have header content like '<meta...' in the middle of the page where it doesn't usually go.

And you should probably get a more current version of jQuery.  http://jquery.com/download/
0
 
Ray PaseurCommented:
One of the helpful tools is the W3 Validator.  It can tell us if we have errors in the markup.  JavaScript will sometimes work even when there are errors in the markup, but it's a crap-shoot.
http://validator.w3.org/check?uri=http%3A%2F%2Fsevereweathercenter.com%2Frwd%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 
wallaceds77Author Commented:
Thank you for your review, Dave.  Each site page (Index, About, Radar and such) is split up into pieces. There is a 'header.php' and 'footer.php' that contain code relevant for each page (all the meta tags, css, js, nav). The PHP files are being called together into each individual user page through a PHP Includes function. I had the 'clocks.js' being called-in to the 'clocks.php' page, but have since added it to the 'header.php' called-in on each page. I don't necessarily see the '<meta...' you mention. Is it in the 'clocks.php' page? I changed the 'wrapper' id, thanks.

As for the jQuery. I'm using some 3rd party scripts/code. At one time, I looked at updating the jQuery, but things started to break, so I decided to leave it with the revisions that were supported.

I guess I figured there was something I was missing, like an 'Onload' or some trigger that an Iframe was emulating.
0
 
Dave BaldwinFixer of ProblemsCommented:
In order to see what is actually in the page, I use a Firefox Add-on called Web Developer.  It has a function to view the 'Generated Source' that you get after the javascript is run.  The 'meta' elements appear to be coming from 'clocks.php' because it is generating a complete stand-alone page.
0
 
Dave BaldwinFixer of ProblemsCommented:
Now you need to make 'clocks.js' load After 'clocks.php' is loaded.  When 'clocks.js' runs first, it has errors because the 'div's that it is looking for do not exist yet.
0
 
wallaceds77Author Commented:
I placed the 'clocks.js' after the 'time' div in the body but no resolution. I appreciate the good tips, I'll show this as answered. I know that an Iframe on the page will trigger the clocks to load properly.
0
 
wallaceds77Author Commented:
Thank you, Alexandre Simões! That was absolutely perfect! Javascript is not my strength, but this helped!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.