Dynamische Inhalte in HTML

[microkernel]

Moin
Leider kenne ich mich nicht so gut mit Web_Development Sachen aus, aber ich hätte da eine Frage: Ich würde gerne in meinen Browser Daten anzeigen (Zahlen), welche alle X Sekunden aktualisiert werden. Die Daten sollen in Tabellen angezeigt werden. Ich dachte zunächst man könne das mit Frames machen, welche einfach auf eine Seite verweisen, wo nichts anderes als die Zahl steht und welche so ein reload-Tag besitzt. Aber das stelle ich mir nicht sehr elegant vor. Außerdem hatte ich mal irgendwo gelesen dass man das nicht mehr macht... Kann mir jemand eine Technik nennen, wie ich das machen könnte? (oder ein paar Zeilen code?)

Lg aus Hamburg
microkernel

[jerch]

Einen Schnellschuß-Tipp hab ich nicht für Dich, da es wie so oft von den Randbedingungen abhängt.

- Darf Javascript im Spiel sein oder muss es barrierefrei sein?
- Wie werden die Werte generiert?
- Liegen die Werte beim ersten Aufruf alle vor?
- Können die Werte auch clientseitig berechnet werden?
- Wie zeitgenau muss die Aktualisierung erfolgen?

Simpelstes Verfahren wäre die Nutzung eines meta-refresh-Tags, welches die Seite alle x Sekunden neu anfragt, während der Server die Seite mit den neuen Werten bestückt (dazu brauchts auch keine Frames). Für komplexere Sachen würde ich die Daten per Ajax nachladen. Liegen die Daten zu Beginn alle vor oder sind clientseitig berechenbar, ist ebenfalls Javascript Dein Freund.

[microkernel]

Einen Schnellschuß-Tipp hab ich nicht für Dich, da es wie so oft von den Randbedingungen abhängt.

- Darf Javascript im Spiel sein oder muss es barrierefrei sein?
- Wie werden die Werte generiert?
- Liegen die Werte beim ersten Aufruf alle vor?
- Können die Werte auch clientseitig berechnet werden?
- Wie zeitgenau muss die Aktualisierung erfolgen?

Entschuldigung. Meine Beschreibung war anscheinend etwas zu ungenau. JavaScript darf gerne im Spiel sein. Bei den Daten handelt es sich um Messwerte (Werte können nicht clientseitig berechnet werden). Diese Messwerte ändern sich alle 15 Sekunden. Sie liegen als schon bereits beim Aufruf vor, sind jedoch nach kurzer Zeit nicht mehr aktuell. Die Aktualisierung muss aber auch nicht exakt auf die Microsekunde erfolgen.

Simpelstes Verfahren wäre die Nutzung eines meta-refresh-Tags, welches die Seite alle x Sekunden neu anfragt, während der Server die Seite mit den neuen Werten bestückt (dazu brauchts auch keine Frames).

Darüber habe ich auch bereits nachgedacht, jedoch finde ich die Lösung nicht wirklich elegant. Schließlich befinden sich noch weitere Inhalte auf der Website (Diagramme und andere Grafiken). Ein ständiges nachladen wäre bei diesem Zeitintervall nicht schön :/

[jerch]

Das ist ein Fall für Javascript/Ajax, mit JQuery in 5min aufgesetzt .

[microkernel]

Danke Wie gesagt kenne ich mich mit JavaScript, jQuery und den ganzen Rest nicht wirklich aus. Ich hab trotzdem mal versucht ein kleines Skript zum laufen zu bringen (die Dokumentation von jQuery hat echt geholfen; sehr gut gemacht). Aber irgendwo steckt da ein Wurm drin. Das Skript lädt zwar die Daten beim Laden, aber die automatische Aktualisierung funktioniert nicht wirklich. Kann da vielleicht mal jemand drauf schauen und mir sagen was da falsch sein könnte?

Code: Alles auswählen

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            var data = null;
            var interval = 15; // seconds
            var update = function() {$.getJSON('/data.json', function(d) {data = d;})};
            var rewrite = function() {
                $.each(data, function(key, value) {
                    $("#" + key).html(value);
                });           
            };
            $(document).ready(function() {
                update(); rewrite();
                window.setInterval(function(){
                    update();
                    rewrite();
                }, interval * 1000);
            });
        </script>

[jbs]

Du musst, das rewrite mit in den callback nehmen. Javascript arbeitet eventbasiert, das heißt es wird eine Funktion aufgerufen, sobald die Daten vorliegen.

An dieser Stelle sei dir dieser Post empfohlen: http://ejohn.org/blog/how-javascript-timers-work/

[microkernel]

Danke!

Code: Alles auswählen

        <script>
            var interval = 5; // seconds
            var update = function() {$.getJSON('/data.json', function(d) {rewrite(d);})};
            var rewrite = function(data) {
                $.each(data, function(key, value) {
                    $("#" + key).html(value);
                });           
            };
            $(document).ready(function() {
                window.setInterval(function(){
                    update();
                }, interval * 1000);
            });
        </script>