Um einen Inhalt in einem Div Feld ständig zu aktualisieren, braucht man dank jQuery nur wenige Zeilen Quelltext. Diese Funktion benötigt man zum Beispiel um Datenbankinhalte ohne Seiten refresh zu aktualisieren. So kann zum Beispiel ein Besucher Zähler erstellt werden, welcher bei neuen Besucher sich von alleine aktualisiert und kein lästiger Seiten refresh durchgeführt wird. Aber man kann somit auch ganz einfach die date(); funktion von PHP nutzen.
Um es an einem Praktischen Beispiel darzustellen, habe ich ein kleines Beispiel Tutorial erstellt, welches Anhand der date(); funktionvon PHP, die Uhrzeit ausgibt, ohne einen Seiten reload.
1. Schritt: Zu aller erst benötigen wir die Datei index.html, auf dieser Datei lassen wir dann später die Uhrzeit ausgeben, welches sich ständig Aktualisiert. Im header wird wie gewohnt zuerst das jQuery Framework eingebunden. Desweiteren erstellen wir ein Div, mit der id zeit.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zeit </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Einbinden des jQuery Frameworks
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<div id="zeit" style="width:500px; height:30px; float:left;"></div>
</body>
</html>
Dem Div wurde hier noch ein style zugewiesen, welches nicht relevant ist. Hier kann man selbst die werte vergeben, wie man möchte.
Das wichtige ist, dass eine id vergeben wird.
2.Schritt: Nun benötigen wir noch die Datei, welche die date(); Funktion beinhaltet. Dazu erstellen wir eine weitere Datei. Diese Datei vergeben wir wiederum einen beliebiegen Namen. Jedoch müssen wir darauf achten, dass wir nacher in der index.html Datei den richtigen Pfad zu dieser Datei angeben, doch dazu später. Ich habe die Datei einfach einmal uhr.php genannt.
uhr.php
<?php
echo date('h:i:s');
?>
3.Schritt: Im dritten Schritt, kommen wir nun zum Eigentlichen Teil von jQuery. Hier binden wir nun den Script ein. Dazu öffnen wir wieder die Seite index.html
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zeit </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Einbinden des jQuery Frameworks
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
setInterval(function() {
$('#zeit').load('uhr.php')
},1000);
});
</script>
</head>
<body>
<div id="zeit" style="width:500px; height:30px; float:left;"></div>
</body>
</html>
Hier ist wichtig, damit beim Script .load(url), unbedingt der richtige Pfad angegeben werden muss.
Ich beantworte gerne Fragen zu diesem Thema. Falls Sie einen Verbesserungsvorschlag haben, dann schreiben mir Sie diesen bitte. Auch Kritik nehme ich mit offenen Ohren an.
