Beim Laden Grafik anzeigen

S

Sasser

Erfahrenes Mitglied
Hallo Leute!

Ich nutze das folgende Script, um einen Chat einzubinden. Aus der Datei "getdata.php" hole ich die aktuellen 10 Einträge. Nun kommt es ab und zu vor, dass die Abfrage eine Weile dauert und dementsprechend zeigt er ein leeres Chatfenster an. Mehrere User denken, dass der Chat dann nicht mehr funktioniert.

Nun meine Frage; Wie kann man eine Grafik anzeigen (z.B. Lade ...) wenn er noch kein Ergebniss von der Datei "getdata.php" bekommen hat, bzw. er die Datei lädt?

HTML: 
var xmlHttp = false;
try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}
loadData();
setInterval("loadData()",5000);
function loadData()
{
 if (xmlHttp) {
     xmlHttp.open('GET', 'include/getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             document.getElementById("content").innerHTML = xmlHttp.responseText;
         }
     };
     xmlHttp.send(null);
 }
}
function saveData()
{
if (xmlHttp) {
    xmlHttp.open('POST', 'include/setdata.php');
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send('message='+document.chat.message.value);
}
document.chat.message.value = '';
document.chat.message.focus();
}
 
Also ich habe es nun eingebaut, allerdings zeigt er jetzt die ganze Zeit das Div and und nich den richtigen Inhalt!?

Außerdem aktualisiert er nun die Seite nicht mehr...

HTML: 
var xmlHttp = false;
try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}
loadData();
setInterval("loadData()",5000);
function loadData()
{
 document.getElementById("loading").style.display = "block";
 if (xmlHttp) {
     xmlHttp.open('GET', 'include/getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             if (xmlHttp.status == 200) {
                 document.getElementById("loading").style.display = "none";
                 document.getElementById("content").innerHTML = xmlHttp.responseText;
             } else {
                 document.getElementById("loading").style.display = "none";
             }
         }
     };
     xmlHttp.send(null);
 }
}
function saveData()
{
if (xmlHttp) {
    xmlHttp.open('POST', 'include/setdata.php');
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send('message='+document.chat.message.value);
}
document.chat.message.value = '';
document.chat.message.focus();
}



//edit

So, also der folgende Code funktioniert!

Jetzt muss nur noch

HTML: 
document.getElementById("loading").style.display = "block";

eingebaut werden, dass er wärend des Ladens den Zustand wieder in display: block ändert!?

HTML: 
var xmlHttp = false;
try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}
loadData();
setInterval("loadData()",5000);
function loadData()
{
 if (xmlHttp) {
     xmlHttp.open('GET', 'include/getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             if (xmlHttp.status == 200) {
                 document.getElementById("content").innerHTML = xmlHttp.responseText;
                 document.getElementById("loading").style.display = "none";
             } else {
                 document.getElementById("loading").style.display = "none";
             }
         }
     };
     xmlHttp.send(null);
 }
}
function saveData()
{
if (xmlHttp) {
    xmlHttp.open('POST', 'include/setdata.php');
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send('message='+document.chat.message.value);
}
document.chat.message.value = '';
document.chat.message.focus();
}

Wo muss ich das einbauen, damit es funktioniert? Habe schon einiges durchprobiert...
 
Hast du es schon mit Quaeses Vorschlag versucht?

Quaese hat gesagt.:
Code: 
function theRequest() {
  // Request-Objekt erstellen (xmlHttp)
  // Wird hier nicht gezeigt

  // Ladegrafik einblenden
  document.getElementById("loaderImg").style.display = "block";

  // Request
  xmlHttp.open('GET', 'xmlhttp_request_dummy.php?id=1', true); 

  // Callback-Funktion
  xmlHttp.onreadystatechange = function () {
    if(xmlHttp.readyState == 4){
      if(xmlHttp.status == 200){
        // Gewünschte Anweisungen

        // Grafik wieder ausblenden
        document.getElementById("loaderImg").style.display = "none";
      }else{
        alert("Anfrage nicht erfolgreich!");
        // Grafik wieder ausblenden
        document.getElementById("loaderImg").style.display = "none";
      }
    }
  };
Zum Vergrößern anklicken....

mfg Maik
 
Ja, nach dem Beispiel habe ich mich ja gerichtet!

Es funktioniert auch, nur soll er wenn sich das Script aktualisiert den Style wieder auf block setzen, damit bis zum Ladeende wieder der Ladebalken angezeigt wird!

Also das:

HTML: 
document.getElementById("loading").style.display = "block";

muss noch eingebunden werden, aber egal wie ich es einbinde funktioniert es nicht!?

Jemand eine Idee warum nicht?
 
Ich habe es nun einmal versucht das Anzeigen der Grafik in eine Funktion zu packen, aber er aktualisiert nun nicht mehr!? An was kann das nun noch liegen?

HTML: 
var xmlHttp = false;
try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}
loadData();
showLoading();
setInterval("showLoading()",5000);
setInterval("loadData()",5000);
function loadData()
{
 if (xmlHttp) {
     xmlHttp.open('GET', 'include/getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             if (xmlHttp.status == 200) {
                 document.getElementById("content").innerHTML = xmlHttp.responseText;
                 document.getElementById("loading").style.display = "none";
             } else {
                 document.getElementById("loading").style.display = "none";
             }
         }
     };
     xmlHttp.send(null);
 }
}
function showLoading()
{
document.getElementById("loading").style.display = "block";
}
function saveData()
{
if (xmlHttp) {
    xmlHttp.open('POST', 'include/setdata.php');
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send('message='+document.chat.message.value);
}
document.chat.message.value = '';
document.chat.message.focus();
}
 
Ich habe mich genau an sein Beispiel gehalten:

HTML: 
loadData();
setInterval("loadData()",5000);
function loadData()
{
 if (xmlHttp) {
     document.getElementById("loading").style.display = "block";
     xmlHttp.open('GET', 'include/getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             if (xmlHttp.status == 200) {
                 document.getElementById("content").innerHTML = xmlHttp.responseText;
                 document.getElementById("loading").style.display = "none";
             } else {
                 document.getElementById("loading").style.display = "none";
             }
         }
     };
     xmlHttp.send(null);
 }
}

Nur aktualisiert er nicht mehr!? Außerdem wird das Div nicht eingeblendet, bzw. auf block gesetzt ...

Ich denke mal er führt:

HTML: 
setInterval("loadData()",5000);

nicht mehr aus!? Aber warum?
 
Zuletzt bearbeitet:
Ich habe mir jetzt mal den Fehler ausgeben lassen und zwar sagt er zum folgenden Code:

HTML: 
document.getElementById("loading").style.display = "block";

FEHLER:

document.getElementById("loading") is null

Aber wie kann es sein, dass dieses Element nicht vorhanden ist, aber ein paar Zeilen weiter runter im JavaScript dann plötzlich da ist!?
Ich finde das total unlogisch...
 
Zuletzt bearbeitet:
Ich glaub ich gebe es auf, der Fehler ist für mich sinnlos denn wie kann das Element einmal vorhanden sein und dann doch nicht mehr...

Naja ich danke euch trotzdem, auch wenn der ganze Tag sinnlos war :p
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück