mit mootools div container alle 30 sek aktualisieren
Tunnel85
- javascript
Hallo zusammen,
ich möchte in einem Projekt einen div-Container alle 30 Sekunden erneuern lassen.
Verwende in dem Projekt mootools habe auch was passendes dazu gefunden, allerdings läuft die Aktualisierung erst wenn man einmal auf einen Link geklickt hat. Ich möchte es allerdings ab laden der Seite schon haben. Bin noch ziemlich neu im Thema Ajax, wahrscheinlich ist es gar kein großes Problem.
Hier mal der js-code:
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){
$('start').fireEvent('click', 1000);
var url = 'time.php';
var timer = 3;
var periodical, dummy;
var start = $('start'), image = $('image');
var ajax = new Ajax(url, {
update: image,
method: 'get',
onComplete: function() {
image.removeClass('ajax-loading');
},
onCancel: function() {
image.removeClass('ajax-loading');
}
});
var refresh = (function() {
dummy = $time() + $random(0, 100);
image.empty().addClass('ajax-loading');
ajax.request(dummy);
});
start.addEvent('click', function(e) {
new Event(e).stop();
$clear(periodical);
image.empty().addClass('ajax-loading');
periodical = refresh.periodical(timer * 1000, this);
ajax.request($time());
});
});
/* ]]> */
</script>
und hier der html
<a href="#" id="start">button</a>
<a href="#" id="stop"> stop</a>
<div id="image" style="width:1024;height:273px;border:5px solid black"><?php include 'time.php'; ?></div>
wäre nett wenn mir jemand einen Anstoß geben würde.
Mfg
Tunnel 85
Hallo,
wieso machst setzt Du die Funktion nicht in den BODY, z.B. so:
<script type="text/javascript">
funktion()
{
Die Funktion, die alle 30 Sekunden den DIV refresht....
}
</script>
<body onload="funktion()">
.
.
.
.
</body>
Gruß
NoName
$('start').fireEvent('click', 1000);
Hier wird die Aktualisierung ohnehin nach einer Sekunde gestartet, du könntest hier auch einfach 1 als Verzögerung angeben.
start.addEvent('click', function(e) {
new Event(e).stop();
$clear(periodical);
image.empty().addClass('ajax-loading');
periodical = refresh.periodical(timer * 1000, this);
ajax.request($time());
});
Diese Funktion wird beim Klick auf den Start-Link ausgeführt. Interessant für dich ist der Aufruf von periodical. Führe den Code also direkt aus, wenn der domReady-Event eintritt (so eine Funktion gibts ja schon). Zum direkten Start rufst du refresh sofort auf.
refresh.periodical(timer * 1000);
refresh();
Die ganze Logik mit start.addEvent und start.fireEvent brauchst du dann nicht mehr.
Mathias
Danke,Danke,Danke!
Klappt wunderbar.
Jetzt habe ich aber noch eine Frage, nur zum verstehen.
Mein fireEvent mit 1000 Millisekunden funktionierte gar nicht, hatte es vor dem posten vergessen zu löschen. Theoretisch hätte das ganze aber doch klappen müssen, oder?
Grüße und den Frieden der Nacht
Tunnel 85
Mein fireEvent mit 1000 Millisekunden funktionierte gar nicht, hatte es vor dem posten vergessen zu löschen. Theoretisch hätte das ganze aber doch klappen müssen, oder?
Ja, ich denke schon. Ich kann aber gerade nicht so tief in die Mootools-Interna einsteigen, um zu verstehen, warum das nicht geklappt hat.
Mathias
So, das ganze funktioniert wunderbar, bis auf das es ajax-loading nicht mehr anzeigt.
Der jetzt von mir verwendete Code ist:
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){
var url = 'kunden_beispiele.php5';
var timer = 9;
var exsample = $('beispiele');
var periodical, dummy;
var ajax = new Ajax(url, {
update: exsample,
method: 'get',
onComplete: function() {
exsample.removeClass('ajax-loading');
},
onCancel: function() {
exsample.removeClass('ajax-loading');
}
});
var refresh = (function() {
dummy = $time() + $random(0, 100);
exsample.empty().addClass('ajax-loading');
ajax.request(dummy);
});
exsample.empty().addClass('ajax-loading');
refresh.periodical(timer * 1000);
refresh();
});
/* ]]> */
</script>
Wo liegt mein Fehler?
Gruß
Tunnel85