In Website nur DIV periodisch aktualisieren

[Thomas S. (thomas_s72)]

Hallo,
mal wieder suche ich einen Spezi der mir auf die Sprünge hilft. Von 
meinem Webserver nach Ulrich Radig bekomme ich ein HTML das mir unter 
anderem die Uhrzeit schickt. Das klappt ganz nett, ist aber statisch. Es 
zeigt also immer die Zeit an als ich die Seite aufgerufen oder 
aktualisiert habe.

Im Internet habe ich gesehen dass man eine spezielle DIV alleine 
aktualisieren kann, die Gesamtseite will ich nicht periodisch 
aktualisieren, das macht das Ändern der Checkboxen häßlich.

Nun habe ich die zwei HTMLs im angehängten ZIP als Beispiel. Die 
test.html aktualisiert eine DIV alle 3 Sekunden, klappt. Wenn ich das in 
meine Seite einbaue tut sich nix. Der Zeitstempel wird im µC immer neu 
berechnet, trotzdem wird die DIV "time" nicht aktualisiert (siehe 
test2.html mit statischem Zeitstempel).

Geht das so nicht? Oder mache ich etwas falsch? Wie erwähnt, periodisch 
die gesamte Seite bekomme ich hin, nur die Zeit DIV alleine irgenwie 
nicht. Bin leider in Web Programmieren absoluter Anfänger und bitte um 
Nachsicht.

Ich wäre für eine kurze Hilfe dankbar.

Gruß
Thomas

[Felix U. (ubfx)]

Hi,

ich hoffe mal, dass ich das jetzt richtig verstehe. Mit JQuery kannst du 
das so machen:

$("#time").load(location.href + " #time > *", "");

Das lädt aber jedes Mal die komplette Seite im Hintergrund neu, aber 
übernimmt nur die Daten aus dem div. Besser wäre es, du würdest den 
Inhalt des divs in eine eigene Datei packen und die dann immer mit load 
neuladen.

[Hans (Gast)]

Wenn es dir nur um die Urzeit geht, brauchst du Ulrich Radig doch gar 
nicht?

[Daniel A. (daniel-a)]

Wenn es dir nur darum geht die Serverzeit auf der Seite anzuzeigen, 
übertrage nur den Timestamp zum Zeitpunkt des Requests und berechne den 
Rest Clientseitig. Beispiel: https://jsfiddle.net/kmm2dj2n/6/

[Thomas S. (thomas_s72)]

Guten Morgen,
@Daniel:
Danke, den Link habe ich gesehen, versuche ich zu implementieren wenn 
ich es nicht anders hin bekomme.

@Hans: Leider kein konstruktiver Beitrag und irgendwie am Problem 
vorbei... :-(

@Felix: Das ist das was ich wollte. Danke sehr!! Leider funktioniert es 
nicht :-(

Der Zeitstempel kommt beim ersten Laden der Zeit und ist dann leer nach 
dem Refresh, ich hab das im Screenshot mal eingekreist.

Hab das mal mit einfachen und doppelten "Gänsefüßchen" versucht, immer 
dasselbe.
Woran liegt das? Ich hatte das schon so am Laufen, dass die  Seite 
periodisch komplett geladen wird, da kam der Zeitstring immer.
Auch verstehe ich die Funktion gar nicht, was bedeutet #time > * ??

Ich wäre für eine kurze Info dankbar.

Gruß
Thomas

[Hans (Gast)]

Thomas S. schrieb:
> @Hans: Leider kein konstruktiver Beitrag und irgendwie am Problem
> vorbei... :-(

Tja. Dann eben nicht. Ich kann das, wozu dir also helfen eine bessere 
Lösung zu finden?

[Felix U. (ubfx)]

Thomas S. schrieb:
> Leider funktioniert es
> nicht :-(

Dann musst du es mal debuggen. Chrome hat z.b. einen Entwicklermodus: 
Wenn du rechtsklickst und dann "Untersuchen" und oben auf den Reiter 
"Network" kannst du live die Ajax Requests sehen, die dein Skript alle 
800ms abschickt. Außerdem wird dir in der Console angezeigt, wenn bei 
ausführung des Skripts ein Fehler auftritt. Du kannst ja mal einen 
Screenshot von dem Network Reiter posten.

[Hans (Gast)]

Felix U. schrieb:
> Thomas S. schrieb:
> Leider funktioniert es
> nicht :-(
>
> Dann musst du es mal debuggen

Vorsicht : das ist schon fast am Thema vorbei. Ich sehe aber auch in der 
Textdatei nicht, wo irgendwas von Ulrich Radig runtergeladen wird

[Frank L. (Firma: Flk Consulting UG) (flk)]

Hallo Thomas,

den Syntax von load findest Du hier:

http://api.jquery.com/load/

Du rufst Deinen WebServer über die URL auf und holst mit dem 
entsprechenden Markup die Zeit aus dem Result heraus. Den Tag '#time' 
musst Du durch das DIV ersetzten das im Result die Zeit umrahmt. 
Location.ref musst Du durch die URL Deines Webservers ersetzen.

Gruß
Frank

[Daniel A. (daniel-a)]

Hier noch eine reine JS version, ungetestet, in der die Seite neu 
abgerufen und nur die Zeit ausgelesen wird:

setInterval(function(){
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'document';
  xhr.open("GET","#",true);
  xhr.onload=function(){
    this.response.getElementById("time").innerHTML = this.response.getElementById("time").innerHTML;
  };
  xhr.send();
}, 1000 );

Ich habe mir nicht angesehen, warum die jQuery Variante nicht 
funktioniert, ich vermute aber das der "*" in "#time > *" nur Nodes 
welche eine Instanz  von HTMLElement sind erfasst, und eine Text Node 
ist keine Instanz von HTMLElement.

[Frank L. (Firma: Flk Consulting UG) (flk)]

Hallo Daniel,

leider kenne ich das Response Dokument nicht was vom Webserver gesendet 
wird. Grundsätzlich würde Deine Variante das Ergebnis liefern, 
vorausgesetzt, das Element würde wirklich "time" heißen.

Aber grundsätzlich ist es so, dass das Kommando welches gesendet wird, 
versucht ein Element im Response zu finden, dass die ID "time" hat. Gibt 
es im Response kein Element mit dieser ID wird das Ergebnis immer ein 
leerer String sein.

In JQuery gibt es zwei Möglichkeiten auf den Wert eines HTML Tags 
zuzugreifen. Handelt es sich z.B. um ein INPUT Tag, würde der Zugriff 
mit .val() das entsprechende Ergebnis und bei einem Textelement mit 
.text() liefern.

Wenn mir jemand das Response also den Quellcode des Aufrufs liefern 
könnte, dann kann ich die Entsprechung liefern.

Gruß
Frank

[Otto (Gast)]

Hans schrieb:
> Ich sehe aber auch in der
> Textdatei nicht, wo irgendwas von Ulrich Radig runtergeladen wird

Warum bist du der Meinung, daß der TO etwas von Ulrich Radig runterladen 
will?
Er hat einen Webserver nach Ulrich Radig am laufen!

[Thomas S. (thomas_s72)]

Hallo,
danke für die rege Beteiligung. Ja, ich habe den Web Server von Ulrich 
am Laufen, der schickt mir die Webseite.
Inzwischen habe ich mich ein wenig in HTML und Java script für Anfänger 
eingearbeitet und eine HTML Datei gestrickt die so funktioniert wie ich 
das will.

Das periodische Update war ein Holzweg. Ich sende einen Zeitstempel beim 
Laden der Seite und ziehe dabei die aktuelle Zeit des Clients.
Dann bilde ich die Differenz und update die Client Zeit plus Differenz 
jede Sekunde auf der Seite. Klappt ganz toll.
Ich muss nun nur noch meinen Zeitstempel der biser ein Text war (So, 
11.11.2011 11.11.11 z.B.) in einen Long wandeln und den dann schicken.

Sollte aber nicht das Problem sein.

Wenn es fertig ist werd ich es mal hier anhängen. Muss beruflich weg bis 
Freitag, kann also ein paar Tage dauern.
Das Thema ist also erledigt.

Gruß
Thomas

[Thomas S. (thomas_s72)]

Soo, die Sache hat mir keine Ruhe gelassen. Hier das Script und es 
funzt!!
Die DIV die angesprochen wird sieht beispielsweise so aus:

<div id="time">1506360600</div>

<script>
    var server_time;
  var client_time=Date.now()/1000;
  var tmp;
  function init()
  {
   var str=document.getElementById("time").innerHTML.toString();
   tmp=str.slice(0,10);//schneidet eventuelle Folgezeichen ab
   server_time=tmp;
   tmp=str.slice(10);
   setInterval(ShowTime,1000);//alle 1000ms
   ShowTime();
  }
  window.onload=init();
  function BuildDate(a)
  {
   var 
time=zeropad(a.getUTCDate(),1)+'.'+zeropad(a.getUTCMonth()+1,1)+'.'+a.ge 
tUTCFullYear()+' 
'+zeropad(a.getUTCHours(),2)+':'+zeropad(a.getUTCMinutes(),2)+':'+zeropa 
d(a.getUTCSeconds(),2);
   return time;
  }
  function ShowTime()
  {
   var d=new Date((server_time-client_time)*1000+Date.now());
   document.getElementById("time").innerHTML = " Web Server Zeit: 
"+BuildDate(d)+"  "+tmp;
  }
  function zeropad(s,n)
  {
    s=s.toString();
    while(s.length<n)s='0'+s;
    return s;
  }
</script>
Das wars!!