kostenloser Webspace werbefrei: lima-city


nach Countdown Inhalt aktualisieren ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    timeplay

    timeplay hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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();
    }

  4. Autor dieses Themas

    timeplay

    timeplay hat kostenlosen Webspace.

    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!
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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
    	}
    }
  6. Autor dieses Themas

    timeplay

    timeplay hat kostenlosen Webspace.

    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
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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.
  8. 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

Login zum Webhosting ohne Werbung!