nach Countdown Inhalt aktualisieren ?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

18:49, 12.4.2012

Hallo

nach Klick auf einen Link startet ein Countdown
der dann z.B. 10 Sekunden runter zählt und dann (ohne Browser-reload)
wenn bei 0 angekommen einen Inhalt auf der Seite aktualisieren soll ...

also alle 10 Sekunden aus einer php Datei neu erzeugten Inhalt in DIV anzeigen

den Coutdown bekomme ich gerade noch hin, (Code siehe unten)

aber der Inhalt wird noch nicht aus .php aktualisiert
nur ein Zähler, wie oft der Countdown schn gelaufen ist

wie geht das mit "per AJAX Inhalt aus .php Datei laden" ?

halt so, das alle 10 Sekunden der Inhalt eines DIV aktualisiert wird
mit dem Inhalt der von einer php-Datei "live" errzeugt wird

hier mein bisheriger JS Code:

<script type="text/javascript">

var timeInSecs;
var ticker;
var runs = 0; 

function stoppTimer(){
	clearInterval(ticker);
	runs = 0;
	document.getElementById("timer").innerHTML = "XX";
}


function startTimer(secs){
	clearInterval(ticker);
	runs++;
	
	// --- hier Inhalt aus php-Datei neu laden und in DIV schreiben --- 
	
	document.getElementById("inhalt").innerHTML = 'neuer Inhalt ' + runs + ' hier rein';
	
	timeInSecs = parseInt(secs);
	ticker = setInterval("tick()",1000); 
	tick(); // to start counter display right away
}


function tick() {
	var secs = timeInSecs;
	if (secs>-1) {
		timeInSecs--;
		var secsshow = (secs<10 ? '0'+secs : secs)
		document.getElementById("timer").innerHTML = secsshow;
	}
	else {
		document.getElementById("timer").innerHTML = "0";
		clearInterval(ticker); // stop counting at zero
		
		// ------- restart Timer 
		startTimer(10); 
		
	}

}


</script>

EDIT: ... sind eigentleich 11 Sekunden wegen

if (secs > -1) {

mit

if (secs > 0) {

stimmt der Countdown

und der dazu gehörende HTML Code:

<p> --- <a href="javascript:startTimer(10);">START</a> 
--- <a href="javascript:stoppTimer();">STOP</a> --- </p>

<div><span id="timer">XX</span> Sekunden.</div>

<br>
<br>

<div id="inhalt">START</div>

<br>

also das Laden per AJAX aus php Datei fehlt noch komplett

könnt Ihr mir mal bitte Euere Code-Vorschäge dafür schreiben ?

Beitrag zuletzt geändert: 12.4.2012 20:12:19 von timeplay

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

19:07, 12.4.2012

timeplay schrieb:
wie geht das mit "per AJAX Inhalt aus .php Datei laden" ?

So:

function createXMLHttpRequest() {
	if(window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}

function getContent() {
	var request = createXMLHttpRequest();
	request.onreadystatechange = function() {
		if((request.readyState == 4) && (request.status == 200)) {
			var doc = request.responseText;
			// in der Variablen doc stehen deine Daten
			// hier musst du das dann verarbeiten...
		}
	}
	request.open("GET", "seite.php", true);
	request.send();
}

Autor dieses Themas

timeplay

timeplay hat kostenlosen Webspace.

19:50, 12.4.2012

Hallo

Danke @hackyourlife das funktioniert soweit,
habe noch meine Zähler-ID in den Aufruf der PHP-Datei hinzugefügt

nur noch eine Frage zur Wert-Übergabe per return aus der Funktion

a) .... erstmal ohne return ... das klappt
Wenn ich die Funktion so aufrufe

function startTimer(secs){
	clearInterval(ticker);
	runs++;
	
	// --- hier Inhalt aus php-Datei neu laden und in DIV schreiben --- 
	getContent(runs); 

	timeInSecs = parseInt(secs);
	ticker = setInterval("tick()",1000); 
	tick(); // to start counter display right away
}

und im AJAX den Teil so mache, dann geht es

function getContent(runid) {
	var request = createXMLHttpRequest();
	request.onreadystatechange = function() {
		if((request.readyState == 4) && (request.status == 200)) {
			var doc = request.responseText;
			// in der Variablen doc stehen deine Daten
			// hier musst du das dann verarbeiten...
			
			document.getElementById("inhalt").innerHTML = doc;
			
		}
	}
	request.open("GET", "seite.php?runid="+runid+"", true);
	request.send(); 
}

b) ... und mit return ... klappt nicht

... wenn ich versuche die im AJAX Teil erstelle Variable doc (mit dem Inhalt aus PHP)
per return zu übergeben, dann klappt es nicht

also wenn ich die Funktion so aufrufe (erwarte Übergabe aus Funktion getContent)

function startTimer(secs){
	clearInterval(ticker);
	runs++;
	
	// --- hier Inhalt aus php-Datei neu laden und in DIV schreiben --- 
	var neuinhalt = getContent(runs); 
	document.getElementById("inhalt").innerHTML = neuinhalt;

	timeInSecs = parseInt(secs);
	ticker = setInterval("tick()",1000); 
	tick(); // to start counter display right away
}

und im AJAX den Teil so mache (mit return doc;) ... , dann geht esNICHT

function getContent(runid) {
	var request = createXMLHttpRequest();
	request.onreadystatechange = function() {
		if((request.readyState == 4) && (request.status == 200)) {
			var doc = request.responseText;
			// in der Variablen doc stehen deine Daten
			// hier musst du das dann verarbeiten...
			
			return doc;
			
		}
	}
	request.open("GET", "seite.php?runid="+runid+"", true);
	request.send(); 
}

also in dem Versuch mit return ist die Variable neuinhalt: undefined

??? ... Warum wird der neue Inhalt nicht per return übergeben?
Was ist daran falsch ???

muss ich den Inhalt immer direkt in der getContent() Funktion zuweisen
(mit document.getElementById)
oder kann ich das Ergebnis (den String) auch aus der Funktion übergebe (return) ?
wie ?

Danke!

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
20:42, 12.4.2012

timeplay schrieb:
also in dem Versuch mit return ist die Variable neuinhalt: undefined

??? ... Warum wird der neue Inhalt nicht per return übergeben?
Was ist daran falsch ???

muss ich den Inhalt immer direkt in der getContent() Funktion zuweisen
(mit document.getElementById)
oder kann ich das Ergebnis (den String) auch aus der Funktion übergebe (return) ?
wie ?
Das geht deshalb nicht, weil du den XMLHttpRequest asynchron verwendest.

Die Funktion in der die doc-Variable vorhanden ist ist nichts weiter als eine weitere Funktion, die hier anonym definiert wurde. Der Vorteil von asynchron ist, dass deswegen nicht der Rest der Seite hängt, wenn hier das Netzwerk etwas länger braucht.

Die einfache synchrone Variante sieht so aus:
```
function createXMLHttpRequest() {
	if(window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}

function getContent() {
	var request = createXMLHttpRequest();
	request.open("GET", "seite.php", false);
	request.send();
	if(request.status == 200) {
		var doc = request.responseText;
		// in der Variablen doc stehen deine Daten
		// hier musst du das dann verarbeiten...
		// allerdings kannst du von hier auch return ausführen
	}
}
```
Autor dieses Themas
timeplay

timeplay hat kostenlosen Webspace.

7:57, 13.4.2012
ok, danke,
verstehe, doc ist nicht der String, sondern wieder eine Funktion

Aber mal angenommen, ich will mit der GET-Abfrage nicht direkt Inhalt (HTML-Code) holen,
sondern die Datei seite.php erzeugt einen JSON Code, den ich beim "Aktualisieren"
für die Ausgabe noch an eine andere JS-Funktion übergeben will, wie mache ich dann das?

Edit:
habe Beispiel für JSON mit jQuery (für Twitter Suche) gefunden,
das könnte man ja an eigene JSON Daten anpassen,

aber geht da auch ohne jQuery .. egal jetzt ob JSON oder nur ein String
nach Aufruf mit AJAX den neuen "Wert" innerhalb JS als Variable übergeben?

Beitrag zuletzt geändert: 13.4.2012 7:57:22 von timeplay
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
13:21, 13.4.2012

timeplay schrieb:
verstehe, doc ist nicht der String, sondern wieder eine Funktion
Nein, doc ist der String!
Der Unterschied ist nur, ob der in einer eigenen Funktion (bei asynchron) oder in der Hauptfunktion (synchron) zur Verfügung steht.
Die doc-Variable ist nicht mehr als
```
request.responseText
```
, was den heruntergeladenen Text enthält...

timeplay schrieb:
Aber mal angenommen, ich will mit der GET-Abfrage nicht direkt Inhalt (HTML-Code) holen,
sondern die Datei seite.php erzeugt einen JSON Code, den ich beim "Aktualisieren"
für die Ausgabe noch an eine andere JS-Funktion übergeben will, wie mache ich dann das?
So könntest du das machen:
```
function createXMLHttpRequest() {
	if(window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}

function getContent() {
	var request = createXMLHttpRequest();
	request.onreadystatechange = function() {
		if((request.readyState == 4) && (request.status == 200)) {
			var data = JSON.parse(request.responseText);
			// in data ist jetzt das Objekt enthalten, das als JSON empfangen wurde
			rufDeineFunktionMitDenDatenAuf(data);
		}
	}
	request.open("GET", "seite.php", true);
	request.send();
}
```
timeplay schrieb:
aber geht da auch ohne jQuery .. egal jetzt ob JSON oder nur ein String
nach Aufruf mit AJAX den neuen "Wert" innerhalb JS als Variable übergeben?
Und wenn du nur den String brauchst: gib im PHP-Script mit
```
header('Content-Type: text/plain');
```
an, dass es sich um reinen Text handelt.

Im JavaScript hast du in der
```
request.responseText
```
-Variablen deinen String.
Falls es dir noch nicht aufgefallen ist: wenn du hier HTML-Code überträgst bekommst du den auch nur als String.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city