midivirus
Jul 29, 2011, updated at 18:35:08 (UTC)
view4532
view10
0
Goto Top

JavaScript Ajax dynamisches Feld Counting xHTML Aktualisierung

GermansolvedQuestionJavaScriptDevelopment
Hallo Mitglieder,

habe mir von diversen Seite mal folgendes zusammen kopier:

<code type = "php">

function lookup(inputString) {
if(inputString.length == 0) {
Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php?", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} lookup


function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}


Mit den Parametern |onkeyup=\"lookup(this.value);\" onblur=\"fill();\" | in dem INPUT wird der Wert an die PHP-Datei übermittelt und dort eine Abfrage ausgeführt.

Ich habe schon einen Counter laufen:

		Counter -= 1;
		setTimeout("zaehler()", 1000);  
		document.getElementById('counter').innerHTML = '&nbsp;';  
		if (Counter < 360)
			document.getElementById('counter').innerHTML = ' Serverlauf in ' + Counter;  
		if (Counter > 3240)
			document.getElementById('counter').innerHTML = ' Serverlauf vor ' + (3600-Counter);

Ziel von mir ist es:
eine HTML-Variable (nenne es jetzt mal so), in der wie bei Counter dann der wert steht, den die Abfrage ergeben hat.

Also ein Counter, wie viele User online sind, der sich automatisch "aktualisiert".
Könnte das jetzt auch wieder mit IFRAME lösen, aber wirkt dann etwas "komisch".


Wer mir das nicht gleich basteln möchte, kann es auch in Form von Tipps machen!

Sonst, merci!


Beste Grüße
Midi
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 170636

Url: https://administrator.de/contentid/170636

Printed on: April 16, 2024 at 15:04 o'clock

10 Comments
Latest comment
Goto Top
Member: EvilMoe
EvilMoe Jul 29, 2011 at 16:55:38 (UTC)
Goto Top
Hallo,

das ist gar keine große Kunst. Wenn du dir dein "kopiertes" Script ansiehst fällt gleich auf das dort mit Jquery ein JavaScript Framework gearbeitet wird.
Ich arbeite damit selber gerne, erspart viel Schreibarbeit.

$.post('ajax/test.php', function(data) {  
  $('#result').html(data);  
});

Mehr Code benötigst du gar nicht. Fehlt nur noch dein Timeout die die Funktion ständig erneut aufruft.
Der Code oben gib das Ergebnis was die "test.php" liefert im Element mit der ID 'result' aus.
Member: Midivirus
Midivirus Jul 29, 2011 at 18:34:23 (UTC)
Goto Top
Ich grüße dich @EvilMoe,

ist doch einfacher als ich gedacht hatte.

Irgendwann hab ich nix mehr gelesen und verstanden, vor lauter Programmiersprachen face-sad

Trotzdem danke und:
Bis demnächst,
Midi
Member: EvilMoe
EvilMoe Jul 29, 2011 at 23:02:48 (UTC)
Goto Top
Jquery ist einfach ein sehr schönes Framework und kann es jedem nur empfehlen der mit JavaScript arbeitet.
Auch gibt es dafür sehr viele Plugins wodurch es nahezu alles gibt was man sich wünscht face-smile
Member: Midivirus
Midivirus Aug 01, 2011 at 06:55:39 (UTC)
Goto Top
Eines noch:

Ich hab es heute morgen in dem Konstrukt gestartet, möchte es nicht mehr.

<HTML>
<BODY>

<script language="javascript">  
function onlinecount()
{
	$.post('counter_ajax.php', function(data) {  
		$('#result').html(data);  
	});
	setTimeout("onlinecount()", 600000);  
}
window.onload = onlinecount;
<script>

</BODY>
</HTML>

Beide Dateien liegen im gleichen Verzeichnis.

Die Datei einzeln aufgerufen, bringt natürlich das gewünschte Ergebnis.

Gibt es da einen Fehler?
Passenden Wochenstart ...
Midi
Member: EvilMoe
EvilMoe Aug 01, 2011 at 08:39:03 (UTC)
Goto Top
Hallo,

JavaScript sollte eher in dem Header gehören nicht unbedingt im Body.
Warum nutzt du nicht das Event "onLoad" im Body?


Gruß
Member: Midivirus
Midivirus Aug 01, 2011 at 10:08:45 (UTC)
Goto Top
<HTML>
<HEAD>

<script language="javascript">  
<!--
var Counter = 380;		
var stunde = 12;

function zaehler()
{
	if (Counter > 0) {
		Counter -= 1;
		setTimeout("zaehler()", 1000);  
		document.getElementById('counter').innerHTML = 'testtest';  
		if (Counter < 360)
			document.getElementById('counter').innerHTML = ' Serverlauf in ' + Counter;  
		if (Counter > 3240)
			document.getElementById('counter').innerHTML = ' Serverlauf vor ' + (3600-Counter);  
	} else {
		//window.location.reload();
		setTimeout("zaehler()",1000);  
		Counter = 3600;
		stunde ++;
	}
	var d=new Date();
	document.getElementById('counterunix').innerHTML = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();  
}
function onlinecount(){
	$.post('counter_ajax.php', function(data) {  
	  $('#result').html(data);  
	  document.debug.output.value = "test";  
	});
	setTimeout('onlinecount()', 1000);  
	
}
window.onload = onlinecount;
window.onload = zaehler;

-->
</script>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<SPAN id="result"></SPAN>  
<SPAN id="counter"></SPAN>  
<SPAN id="counter2"></SPAN>  
<form action="#" name="debug"><div><textarea name="output"></textarea></div></form>  
</BODY>
</HTML>

Sooouuu, wenn es jetzt nicht klappt, geb ich auf und mach da einen IFRAME rein!

der zaehler() wird ordnungsgemäß ausgeführt, aber von der anderen Funktion merk ich nichts. Nicht ein alert("text"); passiert!


Deine Geduld noch einmal, dann ist aber Schluss face-smile

Gibt wichtigere Dinge,
Grüße
Midi
Member: EvilMoe
EvilMoe Aug 01, 2011 at 10:11:33 (UTC)
Goto Top
Hast du Jquery überhaupt eingebunden? Sehe davon nichts.
Member: Midivirus
Midivirus Aug 01, 2011 at 11:41:21 (UTC)
Goto Top
Fehler gefunden.

einmal das Framework, wie du sagst.

Und ich hab noch den anderen counter, wie oben, zusätzlich mit setTimeout("zaehler()",1000); nebenbei pändeln.

Musste die beiden onload in eine Funktion packen, die diese dann aufruft
[weil es kann immer nur eine Funktion "geladen" werden.]

Damit wäre dann mein Exkurs in JS abgeschlossen.

*merci*

Midivirus
Member: Midivirus
Midivirus Aug 01, 2011 at 11:41:58 (UTC)
Goto Top
Lösung:

<HTML>
<HEAD>
<script src="template/jquery-1.2.1.pack.js" type="text/javascript"></script>  
<script language="javascript">  
<!--

var Counter = 380;		
var stunde = 12;

function myonload(){
	onlinecount();
	zaehler();
}  

function zaehler()
{
	if (Counter > 0) {
		Counter -= 1;
		setTimeout("zaehler()", 1000);  
		document.getElementById('counter').innerHTML = 'testtest';  
		if (Counter < 360)
			document.getElementById('counter').innerHTML = ' Serverlauf in ' + Counter;  
		if (Counter > 3240)
			document.getElementById('counter').innerHTML = ' Serverlauf vor ' + (3600-Counter);  
	} else {
		//window.location.reload();
		setTimeout("zaehler()",1000);  
		Counter = 3600;
		stunde ++;
	}
	var d=new Date();
	document.getElementById('counterunix').innerHTML = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();  
}

function onlinecount(){
	$.post('counter_ajax.php', function(data) {  
	  $('#result').html(data);  
	});
	setTimeout('onlinecount()', 1000);  
}
// window.onload = zaehler;
// window.onload = onlinecount;
window.onload = myonload;


-->
</script>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<SPAN id="result"></SPAN>  
<SPAN id="counter"></SPAN>  
<SPAN id="counter2"></SPAN>  
<form action="#" name="debug"><div><textarea name="output"></textarea></div></form>  
</BODY>
</HTML>
Member: EvilMoe
EvilMoe Aug 01, 2011 at 11:45:35 (UTC)
Goto Top
Wenn du schon mit Jquery arbeitest würde ich die Funktion "zaehler" auch mit den Jquery arbeiten und nicht die langen "document..." schreiben
document.getElementById('counter').innerHTML = 'testtest';
Würde sich verkürzen auf
$('#counter').html( 'testtest' );


EDIT: Jquery 1.2 ist aber schon sehhhr alt. face-smile Ich würde das gegen die neuste Version austauschen um die Kompatibilität zu gewährleisten.


EDIT2: Jquery bietet auch eine eigene möglickeit ein "onload" Event auzulösen.
$(document).ready(function() {

alert('Ich werde ausgeführt wenn die Seite fertig geladen ist');  

});
GermansolvedQuestionJavaScriptDevelopment