JS Uhr jQuery alle x Sekunden DIV neu laden load()
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeige
aufruf
ausgabe
brauche
code
dank
date
frage
funktion
http
idee
monat
sekunde
speichern
start
tag
uhr
url
warten
webseite
-
Hallo
wie kann ich mit jQuery alle x tag/sekunde">Sekunden ein .load() automatisch ausführen, ohne Click-Event
hier mein Code bisher
var update_sec = 10; var updateDiv = function () { $('#testdiv').load('pfad/test.php'); } window.setTimeout(updateDiv, (sec * 1000));
funktioniert aber leider nicht, was ist falsch? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würde es mit setInterval() versuchen
setInterval(functions_variable, abstand)
Ruft die Funktion immer wieder nach "abstand" mikroSekunden auf.
var sec = 1; function updateDiv() { $('#testdiv').load('pfad/test.php'); } window.setInterval("updateDiv()", (sec * 1000));
Grüße,
Sky :D
PS: Könnte übrigens daran liegen, dass du sec aufrufst und update_sec definierst ;) -
Ich würde auch setInterval verwenden :)
setInterval(function() { $('#testdiv').load('pfad/test.php'); }, 10000);
Beitrag zuletzt geändert: 6.10.2011 23:02:57 von fabo -
Hallo
ich checks ned
dieses Beispiel geht .... aber die i und a Dinger brauche ich garnicht
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> var i = 1; var a = 1; var datei2load = "test2.php"; // --- zu ladende PHP Datei var sek2load = 2; // --- alle x Sekunden var milisec = (sek2load*1000); $(document).ready(function() { $("#refresh").load(datei2load); var refreshId = setInterval(function() { if (i > 10) { i = 1 } $("#refresh").load(datei2load + '?i=' + i + '&a=' + a); i++; a++; }, milisec); }); </script> <div id="refresh">START</div>
das läuft 1A
ok, dann entferne ich die "überflüssigen" Teile
ABER dann geht es nicht mehr ... nur erster Aufruf, aber keine alle 2 Sekunden
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> var datei2load = "test2.php"; // --- zu ladende PHP Datei var sek2load = 2; // --- alle x Sekunden var milisec = (sek2load*1000); $(document).ready(function() { $("#refresh").load(datei2load); var refreshId = setInterval(function() { $("#refresh").load(datei2load); }, milisec); }); </script> <div id="refresh">START</div>
ist doch genau das Selbe wie oben, nur ohne die i und a Dinger, hab ich "sauber" entfernt
und die haben doch auf die Funktion keinen Einfluss, sind doch nur Zähler oder sowas
?!?! häääÄÄÄÄÄÄ ?!?! ... WARUM ?
Edit:
für die "test2.php" die ins DIV geladen werden soll habe ich
<?php $xtime = time(); $xdate = date('Y-m-d (H:i:s)',$xtime); echo $xdate; ?>
da sieht man ja an den Sekunden, ob es läuft oder nicht
nur so als Nachtrag.
Beitrag zuletzt geändert: 6.10.2011 23:51:15 von uhrinfo -
Hallo,
lass das mit dem 'i' und 'a' einfach in dem Script... damit wird erreicht, dass deine Datei neu geladen wird und nicht aus dem Cache geholt wird. -
cache:false Anweisung gibts nicht für load().
Aber du könntest alternativ auch folgendes an den anfang deines Scripts setzen:
$.ajaxSetup ({ cache: false });
Ergo:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> /* <![CDATA[ */ var datei2load = "test2.php"; // --- zu ladende PHP Datei var sek2load = 2; // --- alle x Sekunden $(document).ready(function() { $.ajaxSetup ({ cache: false }); $("#refresh").load(datei2load); setInterval(function() { $('#testdiv').load(datei2load); }, (sek2load*1000)); }); /* ]]> */ </script> <div id="refresh">START</div>
Dann gäbe es alternativ noch die Funktion ajax():
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> /* <![CDATA[ */ var datei2load = "test2.php"; // --- zu ladende PHP Datei var sek2load = 2; // --- alle x Sekunden $(document).ready(function() { $("#refresh").load(datei2load); $.ajax({ url: datei2load, cache: false, dataType: 'html', success: function(data) { $('#testdiv').html(data); } }); }); /* ]]> */ </script> <div id="refresh">START</div>
In dieser Funktion wird durch cache : false automatisch der Zufallswert an den Request angehangen.
Ansonsten musst du eben in deiner load()-Funktion sowas wie den Timestamp angeben:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> /* <![CDATA[ */ var datei2load = "test2.php"; // --- zu ladende PHP Datei var sek2load = 2; // --- alle x Sekunden $(document).ready(function() { $("#refresh").load(datei2load); setInterval(function() { $('#testdiv').load(datei2load + '?c=' + (new Date().getTime())); }, (sek2load*1000)); }); /* ]]> */ </script> <div id="refresh">START</div>
Oder aber, du deaktivierst den Cache in der PHP-Datei:
header("cache-control: no-cache");
Beitrag zuletzt geändert: 7.10.2011 10:43:17 von fabo -
Danke
das habe ich ausprobiert, leider ohne Erfolg (auf dem lima-city-webspace)
mit PHP: (ganz oben in der Seite)
<?php header("cache-control: no-cache"); ?>
und auch als HTML
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
und auch beides ... kein Lauf alle 2 Sekunden ohne UNIQUE url in load()
aber wenn ich in die .htaccess eine der beiden folgenden Zeilen schreibe
dann geht es auch ohne die UNIQUE url in load()
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0, proxy-revalidate, no-transform" Header set Pragma "no-cache"
zum Parameter '?c=' + (new Date().getTime())
... das braucht doch aber sicher mehr Speicher als i je Aufruf um eins zu erhöhen ? oder egal weil Client-Speicher
zum Aufruf mit $.ajax({ ... })
das ist ja kein jQuery, [ edit: ODER? doch ] dann habe ich ja nur noch $('#testdiv').html(data); als jQuery
wenn ich das Ergebnis data auch direkt per ajax in das DIV schreibe,
dann könnte ich doch auch ohne jQuery auskommen ... funktioniert aber so nicht ?!?
success: function(data) { document.getElementById('testdiv').innerHTML = data; }
noch ne Frage
.... was bringt eigentlich <![CDATA[ ... ]]> ... und warum ist es in Deinem BSP /* auskommentiert */ ?
bei "alten" JavaScript Codes sieht man auch oft <!-- ..... --> um den Quellcode innerhalb des Script-Tags
was ich schon immer für Sinnlos hielt .... bzw. auch ohne wird der Quellcode ja nicht im Browser angezeigt
Beitrag zuletzt geändert: 7.10.2011 13:31:58 von uhrinfo -
zum Parameter '?c=' + (new Date().getTime())
... das braucht doch aber sicher mehr Speicher als i je Aufruf um eins zu erhöhen ? oder egal weil Client-Speicher
Habs bisher noch nicht getestet. Ich denke aber, dass eine Schleife im Zweifelsfall mehr Ressourcen verbrauchen würde. Ist aber auch eigentlich egal, da der Verbrauch minimal ist.
das ist ja kein jQuery
Doch. Siehe http://api.jquery.com/jQuery.ajax/
wenn ich das Ergebnis data auch direkt per ajax in das DIV schreibe,
dann könnte ich doch auch ohne jQuery auskommen ... funktioniert aber so nicht ?!?
Sollte funktionieren. Aber wieso an der Stelle auf JQuery verzichten?!
noch ne Frage
.... was bringt eigentlich <![CDATA[ ... ]]> ... und warum ist es in Deinem BSP /* auskommentiert */ ?
bei "alten" JavaScript Codes sieht man auch oft <!-- ..... --> um den Quellcode innerhalb des Script-Tags
was ich schon immer für Sinnlos hielt .... bzw. auch ohne wird der Quellcode ja nicht im Browser angezeigt
Siehe http://mediavrog.net/blog/2007/10/17/xhtml/javascript-mit-cdata-korrekt-in-xhtml-einbinden/
Beitrag zuletzt geändert: 7.10.2011 16:40:07 von fabo -
ahh, Danke für die guten Antworten
sorry für die vielen (dummen) Fragen, aber ich will ja was lernen :)
ok, auf jQuery verzichten muss ja wirklich nicht sein, ist ja echt 'n cooles Ding
und ich glaub ich bleibe bei dem a++ ist ja keine extra Schleife, sondern innerhalb der setInterval Funktion
das $.ajax({ ... }) natürlich doch jQuery ist habe ich dann auch noch gemerkt ...
das mit <
-
Wie gesagt... Ich würde fast komplett auf PHP verzichten. Ich würde, um Manipulationen zu vermeiden, die aktuelle Zeit mittels PHP in eine JS-Variable schreiben und damit arbeiten. Dadurch muss dann auch nicht ständig eine seperate PHP-Datei aufgerufen werden.
Hier mal ein schickes Beispiel, ganz ohne PHP: http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
Beitrag zuletzt geändert: 7.10.2011 19:38:44 von fabo -
HAllo
ok, eigentlich ist es direkt mit Javascript wirklich besser.
verbraucht kein Traffic durch ständiges neu laden ...
habe jetzt folgenden Code
<head> <title>Digital Uhr JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background:#FFFFFF; } #content { text-align:center; margin:0px; padding:0px; } #digitaluhr { margin:auto; padding:8px; width:130px; text-align:center; background:#DEDEDE; border:1px solid #999999; } .uwday { font-size:22px; font-weight:normal; color:#333333; } .uzeit { font-size:28px; font-weight:bold; color:#000000; } .udate { font-size:22px; font-weight:normal; color:#333333; } --> </style> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <?php date_default_timezone_set('Europe/Berlin'); $xtime = time(); // ----- aktuelle Serverzeit ----- ?> <script type="text/javascript" language="JavaScript"> /* <![CDATA[ */ // ------ Start-Werte von Serverzeit ------ var uhrs = <?php echo date('G',$xtime); ?>; var umin = <?php echo date('i',$xtime); ?>; var usec = <?php echo date('s',$xtime); ?>; var udow = <?php echo date('w',$xtime); ?>; var uday = <?php echo date('d',$xtime); ?>; var umon = <?php echo date('m',$xtime); ?>; var uyea = <?php echo date('Y',$xtime); ?>; var dow = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"); var weekday = dow[udow]; // -------------------------- function show() { usec++; if (usec > 59) { usec = 0; umin++; } if (umin > 59) { umin = 0; uhrs++; } if (uhrs > 23) { uhrs = 0; uday++; weekday = dow[(udow+1)]; } if (uhrs <= 9) { var vhrs = "0" + uhrs; } else { var vhrs = uhrs; } if (umin <= 9) { var vmin = "0" + umin; } else { var vmin = umin; } if (usec <= 9) { var vsec = "0" + usec; } else { var vsec = usec; } if (uday <= 9) { var vday = "0" + uday; } else { var vday = uday; } if (umon <= 9) { var vmon = "0" + umon; } else { var vmon = umon; } if (uyea <= 9) { var vyea = "0" + uyea; } else { var vyea = uyea; } var ausgabe = "<span class=\"uwday\">" + weekday + "</span><br /><span class=\"uzeit\">" + vhrs + ":" + vmin + ":" + vsec + "</span><br /><span class=\"udate\">" + vday + "." + vmon + "." + vyea + "</span>"; // document.getElementById("digitaluhr").innerHTML = ausgabe; $("#digitaluhr").html(ausgabe); setTimeout("show()", 1000); } // -------------------------- // Start mit jQuery oder als onload="DigiClock()" im <body> TAG $(document).ready(function() { show(); }); /* ]]> */ </script> </head> <body> <div id="content"> <h1>JavaScript</h1> <h2>Digital Uhr</h2> <br /> <br /> <div id="digitaluhr"></div> <br /> <br /> <br /> </div> </body> </html>
Wenn jemand Verbesserungs-Vorschläge hat, gerne her damit
Frage:
ist für CSS Definition im style TAG auch /* <
Allerdings gibts da noch zwei Kleinigkeiten, wie hier zu sehen ist.
Nach Samstag springt das Array auf dow[7], welches nicht definiert ist. Ausgabe: undefined
Abhilfe:
Aus
wirdif (uhrs > 23) { uhrs = 0; uday++; weekday = dow[(udow+1)]; }
Und schon klappts, Sonntag wird angezeigt.if (uhrs > 23) { uhrs = 0; uday++; if(udow==6){udow=-1;}; weekday = dow[(udow+1)]; }
Die zweite Kleinigkeit betrifft das Datum, welches dann auch mit einem neuen Monat, bzw nach Sylvester mit einem neuen Jahr beginnen sollte.
Ansonsten ne Piffige Idee!
-
Du kannst CData auch innerhalb des eingebetteten Stylesheets nutzen, ja.
Im Bezug auf die Tatsache, dass das Ganze nach dem Dokument erst eine Sekunde später lädt, würde ich stattdessen sowas wie "Lädt..." anzeigen lassen. Das ist die eleganteste Lösung. -
menschle schrieb:
Wie ich sehe, hattest Du einen kleinen Wurm schon selbst gefunden:
ja, der Wurm war sogar eine riesengroße Schlange ^^
ich hatte zuerst die führende Nullen direkt an uhrs / umin / usec angehängt
Resultat war dann, dass jede Sekunde eine neue Null angehänt wurde
und anstatt 17:08:22 stand da nach paar Sekunden sowas wie 17:0000000008:22
... aber Schlage besiegt !!!!
menschle schrieb:
Die zweite Kleinigkeit betrifft das Datum, welches dann auch mit einem neuen Monat, bzw nach Sylvester mit einem neuen Jahr beginnen sollte.
ja, daran habe ich auch schon gedacht und mir ist gleich dabei aufgefallen,
dass das wieder einen Rattenschwanz mit sich zieht,
denn bei Monatswechsel muss man ja auch noch auf Anzahl Tage im Monat achten,
und bei Jahreswechsel auf Schaltjahre ... ok ginge mit PHP date('t') ... und date('L')
bei JavaScript Objektreferenz date habe ich dafür aber leider keine Entsprechungen gefunden
menschle schrieb:
Ansonsten ne Piffige Idee!
Danke, die Idee geht ja auch noch weiter:
User sollen sich Design (Farben / Größen / Schriftart ) selber auswählen können
und bekommen einn JavaScript mit src zum einbinden auf Ihrer eigenen Webseite
Erste Versuche dafür sieht man ja schon an der Analog-Uhr ... aber nur rudimentär bisher
fabo schrieb:
CData auch innerhalb des eingebetteten Stylesheets nutzen
ok, Danke ... kommt mir konsequenter vor (im Bezug auf die Erklärung mit dem Validator)
fabo schrieb:
... nach dem Dokument erst eine Sekunde später lädt, würde ich stattdessen sowas wie "Lädt..." anzeigen lassen
gute Idee, am besten so ein Ajax Lade-Rad (Spinner) ... kann ich ja direkt als Grafik ins DIV setzen,
der Inhalt wird ja dann bei Aufruf durch die Uhr-Anzeige ersetzt.
Aber mit der setTimeout("show()", 1000); Version scheint es ja sofort zu laden
ist die Frage um wieviel besser setInterval() wäre, wenn überhaupt ein Unterschied
Jetzt habe ich noch ne neue Idee ... Feiertage,
dazu eine Anzeige wie z.B.: "Heute ist Ostersonntag" oder so
ABER ... da habe ich bei ersten Experimenten schon wieder ein Problem .... mit PHP: easter_date()
... aber dazu mach ich dann lieber einen neuen Beitrag auf, ist wohl eher ein anderes Thema
Danke für's "Zurückfüttern" .... aäähh ... das Feedback :)
ich liebe Lima-City !!!
:)
Beitrag zuletzt geändert: 8.10.2011 22:15:47 von uhrinfo -
setInterval()
Führt eine Anweisung immer wieder aus, bis Sie mit clearInterval() beendet wird.
setTimeout()
Führt eine Anweisung einmal nach einer bestimmten Zeit aus. Danach jedoch nicht mehr.
setTimeout macht in deinem Falle relativ wenig Sinn. Dann könntest du das Ganze eher in eine eigene Funktion packen und diese Funktion sowohl beim Laden der Webseite, als auch danach in regelmäßigen Abständen ausführen lassen.
Jedoch hast du ja auch "theoretisch" das Problem, dass erst einmal die gesamte Seite geladen wird und dann dein Script d.h. es gibt bei langsameren Rechnern so oder so eine Verzögerung. Ob der Aufruf nun sofort statt findet, oder nicht.
Deshalb halte ich es für ratsamer, das zu beschreibende Element einfach mit irgendeinem Inhalt zu füllen (Ladebild, etc.), anstatt auf eine erste Reaktion von deinem Script zu warten.
Beitrag zuletzt geändert: 9.10.2011 3:58:23 von fabo -
ok, hast ja räääschd
verwende jetzt setInterval() ... auch wen bei mir setTimeout("show()", 1000); ganz gut lief
(Funktion jede Sekunde neu aufrufen) aber wer weiss was für Gurken im Web unterwegs sind
und im document.ready dann sowas wie $("#digitaluhr").html("<br />LOADING<br/>bitte warten");
schön machen mit ner Grafik kann ich es ja immernoch an der Stelle
zum Übergang (Sprung) auf Monat und Jahr
zuerst dachte ich, das brauche ich garnicht, wer schaut sich die Uhr schon soooooo lange an,
aber klar ... wenn die Uhr kurz vor dem Übergang / Sprung gestartet wird, kann das doch mal vorkommen
Frage dazu:
muss ich Schaltjahre prüfen, oder liefert PHP date('t') automatisch bei Schaltjahr 29 statt 28 im Februar ?
wenn ja, dann müsste das ja genügen:
var tgmn = <?php echo date('t',$xtime); ?>; ... if (uday > tgmn) { uday = 1; if(umon==12){umon=1; uyea++;} else { umon++ } } ...
sonst muss ich halt bei date('t') == 1 noch einen Tag im Februar dazu zählen
EDIT: unabhängig von Schaltjahr .. scheint zu klappen ... siehe demo6b
PS: zu Feiertage:
ich habe jetzt hinbekommen, das Datum für bewegliche Feiertage zu berechnen
siehe Beitrag berechnung-bewegliche-feiertage-easter_date
aber Einbau bin ich mir noch nicht so sicher, ob als Teil der Uhr oder als Extra-Script
mit Countdown noch x Tage bis Feiertag Y ....
Beitrag zuletzt geändert: 9.10.2011 12:47:47 von uhrinfo -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
