Auto Refresh weer
Dit plaats ik in een array en die array die lees ik dan uit en dan laat ik de resultaten zien in mijn project.
Maar nu wil ik dat het stukje waar het weer staat dat die iedere minuut vernieuwd maar zonder de pagina te vernieuwen. Net zoals een javascript klokje zoiets.
Maar ik heb vrij weinig tot geen verstand van javascript.
Is er misschien iemand die mij een beetje op weg kan helpen.
Het gaat om deze code:
<div id='weertitel'>Weer vandaag</div>
<div id='weertekst'>Huidige temp: ".$tempnu."</div>
<div id='weertekst'>Regenval in mm: ".$regenvandaag."</div>
En de php:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
$nu = buienradar($settings['weerstation']);
$morgen = buienradar_verwachting();
$tempnu = $nu['TEMPERATUURGC']." °C";
$regenvandaag = $nu['REGENMMPU'];
?>
$nu = buienradar($settings['weerstation']);
$morgen = buienradar_verwachting();
$tempnu = $nu['TEMPERATUURGC']." °C";
$regenvandaag = $nu['REGENMMPU'];
?>
Door het weer te updaten zonder te pagina te herladen, kan je het beste gebruik maken van Ajax, dit kan heel makkelijk doormiddel van Jquery.
Als je eerst voor je php een apart bestand maakt en deze "binnenhalen.php" noemt en het volgende erin zet:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
$nu = buienradar($settings['weerstation']);
$morgen = buienradar_verwachting();
$tempnu = $nu['TEMPERATUURGC']." °C";
$regenvandaag = $nu['REGENMMPU'];
echo $tempnu.'--++--'.$regenvandaag;
?>
$nu = buienradar($settings['weerstation']);
$morgen = buienradar_verwachting();
$tempnu = $nu['TEMPERATUURGC']." °C";
$regenvandaag = $nu['REGENMMPU'];
echo $tempnu.'--++--'.$regenvandaag;
?>
Dan zet je in je html bron het volgende voor jquery:
Code (php)
1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
Vervolgens zet je het volgende ook in je html bron, voor het inladen van je weer:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
$(document).ready(function() {
function update_weer() {
$.get("binnenhalen.php", function(data) {
data = data.split("--++--");
// En nu nu verander je de waarden van het weer
$("#weertekst").html("Huidig temp: " + data[0]);
$("#weertekst2").html("Regenval in mm: " + data[1]);
});
setTimeout(update_weer, 5000); // Om de 5 seconden word het geupdated
}
update_weer();
});
</script>
$(document).ready(function() {
function update_weer() {
$.get("binnenhalen.php", function(data) {
data = data.split("--++--");
// En nu nu verander je de waarden van het weer
$("#weertekst").html("Huidig temp: " + data[0]);
$("#weertekst2").html("Regenval in mm: " + data[1]);
});
setTimeout(update_weer, 5000); // Om de 5 seconden word het geupdated
}
update_weer();
});
</script>
Oja en veranderd dit:
<div id='weertitel'>Weer vandaag</div>
<div id='weertekst'>Huidige temp: ".$tempnu."</div>
<div id='weertekst'>Regenval in mm: ".$regenvandaag."</div>
even in dit:
<div id='weertitel'>Weer vandaag</div>
<div id='weertekst'>Huidige temp: ".$tempnu."</div>
<div id='weertekst2'>Regenval in mm: ".$regenvandaag."</div>
Gewijzigd op 03/05/2011 10:54:55 door Voornaam Achternaam
ik was net zelf ook aan het zoeken en had het volgende script gevonden:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script language=\"JavaScript\">
setInterval( \"SANAjax();\", 1000 );
$(function() {
SANAjax = function(){
$('#weer').prepend(\"<div id='weertekst'>Regenval in mm: <b>".rand(1, 10)."</b></div>\").fadeIn(\"slow\");
}
});
</script>
setInterval( \"SANAjax();\", 1000 );
$(function() {
SANAjax = function(){
$('#weer').prepend(\"<div id='weertekst'>Regenval in mm: <b>".rand(1, 10)."</b></div>\").fadeIn(\"slow\");
}
});
</script>
alleen deze zet er iedere keer een nieuwe div onder ipv de huidige te vervangen.
Door welke functie moet ik prepend dan vervangen?
Alvast bedankt;)
Gewijzigd op 03/05/2011 11:29:20 door Maikel B
@sebastiaan hij geeft wel ieder seconde een alert als ik die erbij zet dus hij krijgt gegevens binnen.
dit is mijn code nu:
<div id='weertekst1'>Regenval in mm: <b>".rand(1, 10)."</b></div>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script language=\"JavaScript\">
setInterval( \"SANAjax();\", 1000 );
$(function() {
SANAjax = function() {
$('#weertekst1').html(\"<div id='weertekst1'>Regenval in mm: <b>".rand(1, 10)."</b></div>\");
}
});
</script>
setInterval( \"SANAjax();\", 1000 );
$(function() {
SANAjax = function() {
$('#weertekst1').html(\"<div id='weertekst1'>Regenval in mm: <b>".rand(1, 10)."</b></div>\");
}
});
</script>
Gewijzigd op 03/05/2011 14:53:53 door Maikel B
de rand is namelijk php, die php wordt niet vernieuwd. je zult dit in een nieuw bestand oid moeten zetten wil het werken of je moet de javascript rand gebruiken
dus:
Code (php)
1
2
3
2
3
<?php
$('#weertekst1').html(\"<div id='weertekst1'>Regenval in mm: <b>" + rand(1, 10) + "</b></div>\");
?>
$('#weertekst1').html(\"<div id='weertekst1'>Regenval in mm: <b>" + rand(1, 10) + "</b></div>\");
?>
Toevoeging op 03/05/2011 14:55:47:
lol rand had ik zelfs over heen gelezen :)
Gewijzigd op 03/05/2011 15:05:52 door Maikel B