javascript - Vil ikke opdatere status men godt meddelsesvinduet! - Udvikleren.dk

Tags: javascript

Bruger #8254 @ 19.09.07 18:52

Jeg har et lille problem. Jeg ønsker at min lille chat skal vise en status meddelse men den vil ikke opdatere dig. Den opdatere fint chat vinduet, og status bliver og udført hvert sekundt, men den henter bare ikke den nyeste indhold som der tilgengæld gøres i meddelsesvinduet.

Er der nogle som kan se fejlen?

index.html:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
	<title>SupportChat</title>
<script type="text/javascript" src="functions.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<iframe src="message.php" width="450" height="150" style="border: 1px solid #0066CC;" scrolling="yes" frameborder="0">
</iframe>
<br>
<div id="status" style="font-size: 11px;"> </div>
<br>
Skriv besked:<br>
<iframe src="send.php" width="450" height="55" scrolling="no" frameborder="0">
</iframe>

<script type="text/javascript">
<!--
//sæt et timeout der sætter hele processen igang
setTimeout ("GetStatus();", 1000); 
-->
</script>

</body>
</html>

message.html:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
	<title>New document</title>
<meta name="generator" content="IO SoftGame WebType">
<script type="text/javascript" src="functions.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
body{
	background-color: #FFFFFF;
}
</style>

<script type="text/javascript">
<!--
//sæt et timeout der sætter hele processen igang
setTimeout ("GetMessage();", 1000); 
-->
</script>

</head>

<body>
<base target="_blank">

<div id="message"></div>
<div id="new" style="display: none;"></div>

</body>
</html>

functions.js:

Kode

<!--
var respons = "";
var xmlHttp

function GetMessage()
{
	get("load.php");
	
var old = document.getElementById("message").innerHTML;
	document.getElementById("new").innerHTML = respons;
	
	if(old != document.getElementById("new").innerHTML)
	{
		document.getElementById("message").innerHTML = respons;
		parent.frames[0].scrollTo(0,9999999);
		//document.getElementById("message").scrollTop = document.getElementById("message").scrollHeight;
	}
	document.getElementById("new").innerHTML = "";
	
	
	setTimeout ("GetMessage();", 1000);
}

function GetStatus()
{
	get("status.php");
	
	document.getElementById("status").innerHTML = respons;
	
	setTimeout ("GetStatus();", 1000);
}

function get(url)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Din browser understøtter ikke denne chat.");
  return;
  } 
  //hent tekst fra filen load.php
//var url="load.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null); 
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
//skriv tekst fra hent.asp til elementet "meddelelse" og sæt et timeout der udfører denne funktion igen om 1 sekund
	/*var old = document.getElementById("message").innerHTML;
	document.getElementById("new").innerHTML = xmlHttp.responseText;
	
	if(old != document.getElementById("new").innerHTML)
	{
		document.getElementById("message").innerHTML = xmlHttp.responseText;
		parent.frames[0].scrollTo(0,9999999);
		//document.getElementById("message").scrollTop = document.getElementById("message").scrollHeight;
	}
	document.getElementById("new").innerHTML = "";
	*/
	respons = xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;

}
-->

Indlæg senest redigeret d. 13.10.2007 15:49 af Bruger #8254

6 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 19.09.07 23:21

4.283

Du kan evt. prøve at lege med dette:

Kode

<script>
	Function.prototype.createDelegate = function(obj, args, appendArgs){
        var method = this;
        return function() {
            var callArgs = args || arguments;
            if(appendArgs === true){
                callArgs = Array.prototype.slice.call(arguments, 0);
                callArgs = callArgs.concat(args);
            }else if(typeof appendArgs == "number"){
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
                var applyArgs = [appendArgs, 0].concat(args); // create method call params
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
            }
            return method.apply(obj || window, callArgs);
        };
    }

	var Blob = function(config) {
		this.requestMethod = config.requestMethod||'POST';
		this.callback = config.callback||null;

		this.xhr = this.getXHRObj();
		this.xhr.onreadystatechange = this.onFinish.createDelegate(this);
		
		if(config.url) {
			this.load(config.url);
		}
	}
	
	Blob.prototype = {
		load : function(url) {
			this.xhr.open("POST", url, true);
			this.xhr.send(null);
		},
		onFinish : function() {		
			if(this.xhr.readyState != 4) {
				return true;
			}
			if(this.callback) {
				this.callback(this,this.getResponse());
			}
		},
		getXHRObj : function() {
			var xhr = null;
			try {
				// Firefox, Opera 8.0+, Safari
				xhr = new XMLHttpRequest();
			} catch (e) {
				// Internet Explorer
				try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			return xhr;
		},
		getResponse : function() {
			return this.xhr.responseText;
		}
	}

	var test = function() {
		var b = new Blob({
			url : 'conf.php',
			callback : function(blob,response) {
				alert(response);
			}
		});
	}

</script>

<a href="javascript://void(0)" onclick="test()">asdas</a>

Det er testet i firefox. Du må selv debugge i explorer...

Indlæg senest redigeret d. 19.09.2007 23:37 af Bruger #10216

Bruger #10216 @ 19.09.07 19:16

4.283

Vil nok hellere henvise dig til xajaxproject.org som står bag et ganske fornemt Ajax framework til PHP.

Den kan også håndtere noget der ligner synkrone kald. Tror det er det du glemmer at tage højde for.

Bruger #8254 @ 19.09.07 19:22

280

Du kan altså ikke lige se fejlen?

og nu har jeg hentet xajax men hvordan bruger jeg det til at lave min chat?

Indlæg senest redigeret d. 19.09.2007 19:34 af Bruger #8254

Bruger #10216 @ 19.09.07 19:58

4.283

Jo da... det vil jeg tro at jeg kan...

Problemet er asynkrone handlinger. Der hvor du forventer at noget sker først, sker det reelt set først senere.

Linierne herunder er fra din metode GetStatus(), hvor jeg har tilføjet nogle tal der indikerer hvornår handlingen reelt sker:

3. get("status.php");
1. document.getElementById("status").innerHTML = respons;
2. setTimeout ("GetStatus();", 1000);

nr. 3 dækker over de handlinger som ligger i metoden.

mht. xajax:
Du kan se i eksemplerne og dokumentationen om hvordan du bruger xajax.

Indlæg senest redigeret d. 19.09.2007 20:01 af Bruger #10216

Bruger #8254 @ 19.09.07 20:05

280

Da jeg er meget ny i Ajax vælger jeg at kigge på xAjax lidt senere, da jeg mener at det kræver lidt viden om selve Ajax først

Mht. asynkrone handlinger, har du så en måde hvorpå jeg kan ændre min kode så det virker? Evt. via xAjax

Indlæg senest redigeret d. 19.09.2007 20:06 af Bruger #8254

Bruger #8254 @ 20.09.07 16:58

280

jeg fandt på en anden methode at udføre det her på. Nemlig ved at hente alle informationer på en gang. Altså så stua og chat-loggen hentes på en gang

Men tak for hjælpe

Vil ikke opdatere status men godt meddelsesvinduet!

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler