✔ handleResponse - warten bis Ladeanzeige angezeigt wird.

[dwex]

Hallo Leute,

habe schon wieder ein Problem wo ich nicht weiterkomme.

Ich möchte während einer AJAX-Abfrage ggf. eine Ladeanzeige einfügen bis readyState == 4 ist. Das funktioniert auch bestens mit nachfolgendem Code (@CPoly - nicht erschrecken - ich habe deinen Code noch nicht hier eingebaut.):

function handleResponse() {
	if((resObjekt.readyState == 4) && (resObjekt.status==200)) {


        if(resObjekt.responseText.search("response-text-login") != -1){
        	document.getElementsByTagName("body")[0].innerHTML = resObjekt.responseText;
        	document.getElementById("wartebereich").innerHTML = '';
        	document.getElementById("wartebereich").style.visibility = 'hidden';
        }else{
        	document.getElementById("hauptbereich").innerHTML = resObjekt.responseText;
        	document.getElementById("wartebereich").innerHTML = '';
        	document.getElementById("wartebereich").style.visibility = 'hidden';
        }



	} else {
		
		document.getElementById("wartebereich").innerHTML = '<div style="position:absolute; top: 50%; left: 50%; margin-top: -36px; margin-left: -100px; background-color: white; width: 200px; height: 72px; padding: 10px; border: 2px solid rgb(121,183,231);    -moz-border-radius: 5px;">Bitte warten...<br/><br/><img src="./css/redmond/images/ajax-loader.gif"></div>';
        document.getElementById("wartebereich").style.visibility = 'visible';
		
	}
}

Im Else-Teil wird also eine Ladeanzeige im DIV "wartebereich" eingefügt.
Jetzt ist es aber so, wenn der Scriptaufruf nur sehr kurz dauert dann wird die Ladeanzeige auch eingeblendet (sie blitzt kurz auf) - was doch sehr strörend ist.

Jetzt hätte ich versucht das ganze mit set_timeout zu umgehen jedoch mit dem "Erfolg", dass die Ladeanzeige jetzt immer nach dem Wert eingeblendet wird - auch wenn die Seite längst geladen ist. Die Ladeanzeige bleibt dann "für immer" stehen.
Mein Quellcode dazu sieht so aus:

function handleResponse() {
	if((resObjekt.readyState == 4) && (resObjekt.status==200)) {


        if(resObjekt.responseText.search("response-text-login") != -1){
        	document.getElementsByTagName("body")[0].innerHTML = resObjekt.responseText;
        	document.getElementById("wartebereich").innerHTML = '';
        	document.getElementById("wartebereich").style.visibility = 'hidden';
        }else{
        	document.getElementById("hauptbereich").innerHTML = resObjekt.responseText;
        	document.getElementById("wartebereich").innerHTML = '';
        	document.getElementById("wartebereich").style.visibility = 'hidden';
        }



	} else {
		
		window.setTimeout("Hinweis()", 5000);
		
	}
}

function Hinweis() {
    document.getElementById("wartebereich").innerHTML = '<div style="position:absolute; top: 50%; left: 50%; margin-top: -36px; margin-left: -100px; background-color: white; width: 200px; height: 72px; padding: 10px; border: 2px solid rgb(121,183,231);    -moz-border-radius: 5px;">Bitte warten...<br/><br/><img src="./css/redmond/images/ajax-loader.gif"></div>';
    document.getElementById("wartebereich").style.visibility = 'visible';
}

Kann mir bitte jemand erklären wie ich das machen kann.
Vielen Dank für eure Bemühungen und Hilfe im Voraus!

 

[CPoly]

Nimm dir einfach eine Hilfsvariable.

var ready = false;

function handleResponse() {
    if((resObjekt.readyState == 4) && (resObjekt.status==200)) {
 
        ready = true;
 
        if(resObjekt.responseText.search("response-text-login") != -1){
            document.getElementsByTagName("body")[0].innerHTML = resObjekt.responseText;
            document.getElementById("wartebereich").innerHTML = '';
            document.getElementById("wartebereich").style.visibility = 'hidden';
        }else{
            document.getElementById("hauptbereich").innerHTML = resObjekt.responseText;
            document.getElementById("wartebereich").innerHTML = '';
            document.getElementById("wartebereich").style.visibility = 'hidden';
        }
 
 
 
    } else {
        
        ready = false;

        window.setTimeout("Hinweis()", 5000);
        
    }
}
 
function Hinweis() {
    if(!ready) {
        document.getElementById("wartebereich").innerHTML = '<div style="position:absolute; top: 50%; left: 50%; margin-top: -36px; margin-left: -100px; background-color: white; width: 200px; height: 72px; padding: 10px; border: 2px solid rgb(121,183,231);    -moz-border-radius: 5px;">Bitte warten...<br/><br/><img src="./css/redmond/images/ajax-loader.gif"></div>';
        document.getElementById("wartebereich").style.visibility = 'visible';
    }
}

 

[dwex]

Vielen Dank!

Manchmal ist es doch so einfach - aber ich lerne noch JS