[JS] Come fare il refresh di un div? :stordita:

[mosquito70]

Ciao a tutti,
al click su un link/menu si attiva (tramite Ajax) una immagine animata, che non nient'altro che un div nascosto nell'index del sito.

Per ragioni che sarebbe troppo lunghe spiegare, in un caso in FF funziona, mentre in IE no.
Ho notato che se, prima di richiamare il div

var box_logo = document.getElementById("wait_logo");

eseguo un alert, la visualizzazione del div

box_logo.style.display='';

funziona anche su IE.

So che la spiegazione del problema ed il codice e' poco chiaro (ma non ho modo di postarvi tutto), ma potreste darmi qualche consiglio su come ovviare all'uso dell'alert?

grazie.

[Xinod]

ma ajax c'entra qualcosa o il termine lo stai usando impropriamente?
avviene una richiesta asincrona?

riduci il tutto ai minimi termini per limitare eventuali influenze esterne

[mosquito70]

Grazie intanto della risposta.

Cerco di spiegare meglio quale sia la struttura, sperando di riuscirci. Il problema e' secondo me da ritrovarsi nella "struttura" CSS che applichiamo qui.

Mi spiego meglio

Questo e' il div dell'immagine animata presente nell'index.php

<div id='wait_logo' align="center" style="background-color: #CCCCCC;
width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:15001;
filter:alpha(opacity=75);-moz-opacity: 0.75;display:none" >
<table width="100%"  height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr valign="middle">
    <td valign="middle" align="center">[img]languages/images/progress.gif[/img]</td>
  </tr>
</table>
</div> 

Dall'index richiamo le pagine in questa maniera

fnCallByAjax("hole.php",sParam,div,hideWait); 

dove la funzione ajax e' la seguente

function fnCallByAjax(sPath,sParam,div,hideWait,relocate,response,synchronous){
    if(hideWait!=1){
        var box_logo = document.getElementById("porfaespere_logo");
        box_logo.style.display='';
    }

    var oRequest=XmlHttp();
    if (synchronous == true || response == true){
        oRequest.open("post",sPath,false);
    }else{
        oRequest.open("post",sPath,true);
    }
    oRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    oRequest.send(sParam);
    if (oRequest) {
        if (response == true){
            if(hideWait!=1){
                box_logo.style.display='none';
            }
            var sResponse = oRequest.responseText;
            sResponse=sResponse.replace(/^\s*|\s*$/g,"");
            return sResponse;
        }else{
            oRequest.onreadystatechange = function() {
                  if (oRequest.readyState < 4) {
                  
                }
                if (oRequest.readyState == 4 && oRequest.status == 200) {
                    if(relocate == true){
                        location.href=oRequest.responseText;
                    }else{ 
                        gsHTML = oRequest.responseText;
                        gsHTML=gsHTML.replace(/^\s*|\s*$/g,"");
                        var msg = fnGetAlert(gsHTML);
                        if (msg != ''){
                            msg=msg.replace(/^\s*|\s*$/g,"");
                            alert(msg);
                        }
                        var onload = fnGetOnLoad(gsHTML);
                        if (gsHTML != ''){
                            var box = document.getElementById(div);
                            box.innerHTML = gsHTML;
                        }
                        if (onload != ''){
                            eval(onload);
                        }                        
                    }
                    if(hideWait!=1){
                        box_logo.style.display='none';
                    }
                }
            }
        }
    }
} 

In questi casi l'immagine d'attesa viene visualizzata sia con FF che con IE.

Il problema sorge quando l'immagine di attesa, deve essere visualizzata da una finestra che viene aperta dalla pagina risultante dopo aver aperto il menu'

In questa finestra, apro una finestra in rilievo (sopra la finestra attuale) nel seguente modo.

<div class="drsElement border1" style="position:fixed;top:55px;left:100px;height:495px;width:850px;overflow:auto;">
    <table class="drsMoveHandle">
        <tr>
            sasdad
        </tr>
    </table> 

Il codice CSS e' il seguente

.drsElement {
        position:absolute;
        overflow:auto;
        resize:none;
}

Da qui, richiamando la stessa funzione ajax di prima, nel caso di IE l'immagine animata non viene visualizzata.

Io credo che potrebbe essere qui il problema e non tanto nell'Ajax.
Che ne pensate?

Se credete necessario, spostatemi pure in CSS.
Intanto faccio delle prove.

Grazie ancora.

[mosquito70]

Aggiunta...

Ho verificato che se il valore "response" della funzione ajax lo passo NULL (undefined) o a false, l'immagine viene visualizzata.

Poi pero' non funziona un'altra parte del codice

    //var sAux=fnCallByAjax("hole.php",sParam,"xxxxx",1,false,true);

    if (sAux){
        var aAux = sAux.split('#');

        var iCountDestSelected = aAux[1];
        aAux = aAux[0].split('&');
        var len = aAux.length;
        
        for(i=0; i < len; i++){
            document.getElementById(aAux[i]).checked = checked;
        }
        document.getElementById('CountDestinationsSelected').innerHTML = iCountDestSelected;
        document.getElementById('CountDestinationsPending').innerHTML = document.getElementById('DestinationsPending').value - iCountDestSelected;
        
    } 

Ovvero, l'innerHTML non funziona...

mi sto perdendo

[mosquito70]

Aggiungo altre prove, magari vi viene in mente come risolvere.

Nella funzione ajax ho commentato queste righe

function fnCallByAjax(sPath,sParam,div,hideWait,relocate,response,synchronous){
    if(hideWait!=1){
        var box_logo = document.getElementById("wait_logo");
        box_logo.style.display='';
    }

    var oRequest=XmlHttp();
    if (synchronous == true || response == true){
        oRequest.open("post",sPath,false);
    }else{
        oRequest.open("post",sPath,true);
    }
    oRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    oRequest.send(sParam);
    if (oRequest) {
        if (response == true){

COMMENTATE

//            if(hideWait!=1){
//                box_logo.style.display='none';
//            }
            var sResponse = oRequest.responseText;
            sResponse=sResponse.replace(/^s*|s*$/g,"");
            return sResponse;
        }else{
            oRequest.onreadystatechange = function() {
                  if (oRequest.readyState < 4) {
                  
                }
                if (oRequest.readyState == 4 && oRequest.status == 200) {
                    if(relocate == true){
                        location.href=oRequest.responseText;
                    }else{ 
                        gsHTML = oRequest.responseText;
                        gsHTML=gsHTML.replace(/^s*|s*$/g,"");
                        var msg = fnGetAlert(gsHTML);
                        if (msg != ''){
                            msg=msg.replace(/^s*|s*$/g,"");
                            alert(msg);
                        }
                        var onload = fnGetOnLoad(gsHTML);
                        if (gsHTML != ''){
                            var box = document.getElementById(div);
                            box.innerHTML = gsHTML;
                        }
                        if (onload != ''){
                            eval(onload);
                        }                        
                    }
                    if(hideWait!=1){
                        box_logo.style.display='none';
                    }
                }
            }
        }
    }
} 

e nella funzione di ritorno inserita prima

ho messo alla fine il "none" sul div.

....
	var box_logo = document.getElementById("wait_logo");
	box_logo.style.display='none';
	
}

Ora se non imposto a "none" il display, l'immagine animata rimane attiva.
Se invece lo imposto, non si attiva.

Puo' essere che FF e IE abbiamo tempistiche diverse per elaborare i due codici e che quindi IE ci mette di meno ad elaborarlo?