Ajax / jquery reload mit Zähler oder Klick anhalten?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ablauf
anzahl
aufruf
aufrufen
bessere methode
browser
code
dank
date
datei
frage
funktion
index
laden
schleife
schritt
sekunde
stopp
stoppen
url
-
Hallo
ich habe ein kleines AJAX / jquery Konstrukt um alle x Sekunden
eine PHP-Datei neu zu laden und deren Inhalt in einem DIV auszugeben
das funktioniert soweit auch, aber ich habe 2 Fragen dazu
1. wie kann ich da jetzt einen Zähler einbauen,
damit nach z.B. 10 Aufrufen die Schleife abbricht (stoppt)
2. wie kann ich die Schleife per Klick (auch schon vorher) stoppen?
hier mein Code (als BSP)
Datei index.php ... oder wie auch immer, die Seite für Browser-Aufruf
<html> <head> <title>Seitentitel</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="reloader1.js"></script> </script> </head> <body> <div id="refresh" style="text-align:left;"></div> </body> </html>
Datei jquery-1.6.2.min.js ... die aktuelle jquery
... findest Du bei http://jquery.com zum Download
Datei: reloader1.js .... JavaScript zum neu Laden alle x Sekunden (benötigt jquery)
var datei2load = "test1.php"; // --- zu ladende PHP Datei var sek2load = 10; // --- alle x Sekunden /* ------------------------------------- */ var milisec = (sek2load*1000); $(document).ready(function() { $("#refresh").load(datei2load); var refreshId = setInterval(function() { $("#refresh").load(datei2load); }, milisec); }); /* ------------------------------------- */
Datei test1.php ... Dein PHP-Script das alle x Sekunden laufen soll
<?php $showdatum = date("d.m.Y. (H:i:s)" , time() ); echo "<br />".$showdatum."\r\n"; ?>
EDIT:
gibt es evtl eine bessere Methode, um eine php-Datei alle x Sekunden neu zu laden
mit der Möglichkeit die Aktion zu stoppen, nach Ablauf max. Durchläufe und/oder per Klick
?
Danke!
Beitrag zuletzt geändert: 2.8.2011 1:48:36 von promohit -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
var i = 0, datei2load = 'test1.php', // --- zu ladende PHP Datei sek2load = 10, // --- alle x Sekunden milisec = (sek2load * 1000), refreshId; /* ------------------------------------- */ $(document).ready(function () { function countUp() { if (i < 10) { i += 1; $("#refresh").load(datei2load); } else { clearInterval(refreshId); } } refreshId = setInterval(countUp, milisec); $('body').click(function () { clearInterval(refreshId); }); }); /* ------------------------------------- */
Ungetestet, sollte aber funktionieren.
Beitrag zuletzt geändert: 2.8.2011 2:12:30 von fabo -
Hallo
Danke, der Zähler funktioniert.
die Klick-Funktion habe ich noch etwas erweitert, für mehrere Durchläufe :)
Jetzt kann man Stopp und Start im aktuellen Durchlauf klicken
und Next für Beginn eines neuen Durchlaufs ( im BSP mit 10 Schritten alle 2 Sekunden)
BSP: reloader1.js
/* ------------------------------------- */ var i = 0, a = 1, iende = 10, datei2load = 'inc-test1.php', // --- zu ladende PHP Datei sek2load = 2, // --- alle x Sekunden milisec = (sek2load * 1000), refreshId; /* ---------------------- */ $(document).ready(function () { $("#refresh").text(' ... gleich gehts Los ... '); /* ---------------------- */ function countUp() { if (i < iende) { i += 1; $("#refresh").load(datei2load); $("#refreshinfo").text('Lauf: '+ a +' Nr: '+ i +' Sekunden: ' + sek2load ); } else { clearInterval(refreshId); $('#next').fadeIn(1500); } } /* ---------------------- */ refreshId = setInterval(countUp, milisec); /* ---------------------- */ $('#stopp').click(function () { clearInterval(refreshId); }); /* ---------------------- */ $('#start').click(function () { clearInterval(refreshId); refreshId = setInterval(countUp, milisec); }); /* ---------------------- */ $('#next').click(function () { $('#next').fadeOut(1500); clearInterval(refreshId); i = 0; a += 1; refreshId = setInterval(countUp, milisec); }); /* ---------------------- */ }); /* ------------------------------------- */
HTML:
<html> <head> <title>Seitentitel</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="reloader2.js"></script> <style type="text/css"> <!-- #next {display:none;} --> </style> </head> <body> <br /> <div id="refresh" style="text-align:left;"> </div> <br /> <div id="refreshinfo" style="text-align:left;"> </div> <br /> <br /> <div id="stopp" style="text-align:left;">Stopp</div> <br /> <div id="start" style="text-align:left;">Start</div> <br /> <br /> <br /> <div id="next" style="text-align:left;"><strong>Next</strong></div> <br /> <br /> </body> </html>
Ziel ist es, mehrere <a> Durchläufe mit je <i> Schritten zu <x> Sekunden zu machen
OK, die Anzahl der Durchläufe sollte man noch begrenzen ...
EDIT:
umd die Variablen i und a an die PHP-Datei zu übergeben,
einfach in der countUp Funktion vor load einfügen:
datei2load = datei2load+'?vara='+a+'&vari='+i+'';
Dann stehen mit $_GET die Werte in der PHP zur Verfügung.
:)
Beitrag zuletzt geändert: 4.8.2011 16:09:42 von promohit -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage