Avatar billede jkampmann Nybegynder
13. oktober 2007 - 00:08 Der er 3 kommentarer og
1 løsning

Internet explorer viser ikke chattens beskeder (ajax-php-js løsn)

Hejsa alle sammen.
Jeg håber lidt olebole kommer herind, da han har lavet en chat før i tiden..

Mit problem er, at mig og min ven har sat og testet denne lille "live-chat", som jeg har forsøgt mig frem med, via "ajax"/javascript.. Han bruger internet explorer, og jeg bruger firefox. Han kan ikke se beskederne som blir´ smidt i chat-containeren.. Men det kan jeg derimod..

Jeg kan ikke selv finde fejlen, så jeg håber lidt en guru kan finde frem til den - eller derimod rette i min kode, til måske noget mere "korrekt" script..

Jeg har en fil der hedder getMessages.php?game_id=base64 krypteret id, her henter jeg beskederne som er blevet sendt i det chat room man er i..
Den indenholder følgende:

$hent = mysql_query("SELECT
          id, brugernavn, tekst
                    FROM
          chat_beskeder
                  WHERE
          game_id = " . base64_decode($_GET['game_id']) . "
                  AND
          tid < " . (time()+8) . "")
or die(mysql_error());

while ( $row = mysql_fetch_assoc ( $hent ) )
{
  echo $row['id'] . "|" . $row['brugernavn'] . "|" . $row['tekst'] . "#";
}

Så henter jeg beskederne i en fil der hedder chat_messages.php.

Den indenholder en div-container.. "<div id="chat_messages"></div>".

Og et godt stykke javascript med ajax-forbindelse..
Jeg har forkortet koden lidt, så her får i der, hvor beskederne bliver håndteret..

"data" i paramentern funktionen, indenholder f.eks:
1|jesper|hej alle sammen#2|brian|test besked.

1 => id
jesper => brugernavn
hej alle sammen => besked

Så håndterer jeg således:

spil.HandleChatMessages = function ( data )
{
    var data2  = data.split("#");
    var lastone = data2.length;

    for( i = 0;i < data2.length-1; i++ )
    {
          data1  = data2[i].split("|");
          if ( mes[data1[0]] == data1[2])
          {
              /**sdasdasd**/
          } else {
              document.getElementById('chat_messages').innerHTML += "<strong style=\"font-size:12px;\">" + data1[1] + "</strong>: " + data1[2] + "<br />";
              mes[data1[0]] = data1[2];
          }
    }
};

Også laver jeg en som opdaterer for nye beskeder hele tiden:
      setInterval("spil.AjaxPlatform('getMessages.php?game_id=<?php echo $_GET['game_id']; ?>')", 4000);

-- men som sagt, kan min ven - som ser i internet explorer, ikke få vist chattens beskeder..

Nogle venlige sjæle der kan hjælpe mig på rette kurs her?
Avatar billede jhe-ting Nybegynder
13. oktober 2007 - 23:45 #1
Jeg gætter på at det er denne linje der giver problemer:

  document.getElementById('chat_messages').innerHTML += "<strong style=\"font-size:12px;\">" + data1[1] + "</strong>: " + data1[2] + "<br />";

innerHTML er ineffektiv (på de browsere der understøtter den endnu) og anbefalses IKKE!!!

Det du skal ud i er noget der ligner:

var elmStrong = document.createElement('strong');
elmStrong.style.FontSize='12px';
var elmTxt = document.createText(data[1]);
elmStrong.appendChild(elmTxt);
document.getElementById('chat_messages').appendChild(elmStrong);
elmTxt = document.createText(data[2]);
document.getElementById('chat_messages').appendChild(elmTxt);
var elmBr = document.createElement('br');
document.getElementById('chat_messages').appendChild(elmBr);
Avatar billede jhe-ting Nybegynder
13. oktober 2007 - 23:50 #2
PS: Til at lette DOM-kodning bruger jeg gerne nogle hjælpefunktioner:

function gEl(idStr){
    return document.getElementById(idStr);
}

function crEl(strTag){
    return document.createElement(strTag);
}

function crTx(strTxt){
    return document.createTextNode(strTxt);
}


Derved kunne mit eksempel skrives lidt kortere:

var elmStrong = crEl('strong');
elmStrong.style.FontSize='12px';
var elmTxt = crTx(data[1]);
elmStrong.appendChild(elmTxt);
gEl('chat_messages').appendChild(elmStrong);
elmTxt = crTx(data[2]);
gEl('chat_messages').appendChild(elmTxt);
var elmBr = crEl('br');
gEl('chat_messages').appendChild(elmBr);
Avatar billede jhe-ting Nybegynder
14. oktober 2007 - 16:05 #3
Lidt bedre optimeret:

var elmStrong = crEl('strong');
elmStrong.style.FontSize='12px';
var elmTxt = crTx(data[1]);
elmStrong.appendChild(elmTxt);
var elmMsg = gEl('chat_messages');
elmMsg.appendChild(elmStrong);
elmTxt = crTx(data[2]);
elmMsg.appendChild(elmTxt);
var elmBr = crEl('br');
elmMsg.appendChild(elmBr);
Avatar billede olebole Juniormester
14. oktober 2007 - 22:13 #4
<ole>

Prøv også at tjekke formatet JSON (JavaScript Object Notation):
    http://www.eksperten.dk/artikler/1053
    http://www.json.org/
    http://dk2.php.net/manual/en/ref.json.php

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester