I created an html page that shows different divs, i.e. weather forecast etc., for information purposes on my computer. As the page is supposed to run all day long I implemented jquery to realize a regular refresh of the elements. Therefore I've put the divs code into php-files that are being loaded on a regular basis (see code below).
Before I implemented jquery all the divs were working perfectly fine. In total I am using 12 different divs and now 11 of them are still working fine using jquery. The one element that is not working is the 'Windfinder' element which is a widget for weather forecasting. When I am copying the script from the php-file to the div definition in the main document everything is working fine. But then I don't have any updates on the weather forecast.
Screen.html:
<html>
<head>
<title>
Example
</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#Datum {
position: absolute;
left: 1563px; top: 135px;
z-index: 5;
}
#Windfinder {
position: absolute;
height: 180px; width: 600px;
left: 760px; top: 0px;
margin:0px 0 0 0px;
}
#Webcam1 {
position: absolute;
left: 765px; top: 370px;
margin:0px 0 0 0px;
z-index: 6;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-2.1.4.js">
</script>
<div id="Windfinder"></div>
<div id="Datum"></div>
<div id="Webcam1"></div>
<script type="text/javascript">
$(document).ready( function(){
$('#Windfinder').load('Windfinder.php');
$('#Datum').load('Datum.php');
$('#Webcam1').load('Webcam1.php');
refresh_niedrig();
refresh_mittel();
refresh_hoch();
});
function refresh_hoch()
{
setTimeout( function() {
$('#Webcam1').fadeOut('slow').load('Webcam1.php').fadeIn('slow');
refresh_hoch();
}, 5000);
}
function refresh_mittel()
{
setTimeout( function() {
$('#Windfinder').fadeOut('slow').load('Windfinder.php').fadeIn('slow');
refresh_mittel();
}, 10000);
}
function refresh_niedrig()
{
setTimeout( function() {
$('#Datum').fadeOut('slow').load('Datum.php').fadeIn('slow');
refresh_niedrig();
}, 15000);
}
</script>
</body>
</html>
When I delete the script inside the Windfinder.php file and insert a simple word this is shown at the correct position in the loaded Screen.html file. So the problem seems to be about loading the script inside the php file via jquery.
Windfinder.php:
<script type="text/javascript" src="http://www.windfinder.com/widget/forecast/js/thalkirchen_muenchen?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=kmh&columns=3&days=3&show_day=1&show_pressure=0&show_waves=0">
</script>
I did a lot of research on this an can't find a solution. Can anybody help me with this?
Edit: Entering the link directly into my browser I get the following:
var iframeCode = ['<iframe id="wf-forecast-thalkirchen_muenchen" src="http://www.windfinder.com/widget/forecast/thalkirchen_muenchen?show_pressure=0&unit_temperature=c&show_day=1&show_rain=1&unit_rain=mm&days=3&unit_wind=kmh&show_clouds=1&show_wind=1&show_temperature=1&show_waves=0&columns=3&unit_wave=m', '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border: 0px; vertical-align: bottom;"></iframe>'];
host = location.hostname;
if (host) {
iframeCode.splice(1, 0, '&domain=' + host);
}
document.writeln(iframeCode.join(''));
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent",
eventer = window[eventMethod],
messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function(event) {
if (event.origin == 'http://www.windfinder.com') {
var widget = document.getElementById('wf-forecast-thalkirchen_muenchen'),
data = event.data.split(':'),
width = data[0],
height = data[1];
widget.width = width;
widget.height = height;
}
return this;
}, false);
I tried two different approaches inside <script type="text/javascript">
$(document).ready( function(){ part using jquery .getScript. Both did not work out for me.
First approach:
$.getScript("http://www.windfinder.com/widget/forecast/js/thalkirchen_muenchen?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=kmh&columns=3&days=3&show_day=1&show_pressure=0&show_waves=0",
function(data){
$('#Windfinder').html(data);
});
And Second Approach not using the direct url but the Windfinder.php file:
$.getScript('Windfinder.php',
function(data){
$('#Windfinder').html(data);
});
