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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wallaceds77Author Commented:
Thank you, Alexandre Simões! That was absolutely perfect! Javascript is not my strength, but this helped!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.