Message de Chargement ne s'affiche pas si je ne mets pas d'alert

Salut, j'essaye de faire quelque chose de simple: afficher un div en début d'affichage d'une fonction et le cacher à la fin de l'execution de celle ci.

En HTML j'ai:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<input id="linkP2" type="button" value="Prévisualiser" class="Button2_Small" runat="server" onclick="sauvegarde();this.parentNode.click();" />
 
        <div runat="server" id="divLoadingWaitingMsg" style="Z-INDEX: 450; FILTER: alpha(opacity:65); LEFT: 0px; MARGIN: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #ffffff; display: none;">
        	<table height="100%" cellSpacing="0" cellPadding="0" width="100%" align="center" border="0">
        		<tr>
        			<td id="tdWaitMsg" vAlign="middle" align="center">
        				<div class="divLoadingMessageDisplayed">
        					<span>Veuillez patienter,<br>
        						chargement en cours...</span>
        					<div id="divImgLoadingPleaseWait"></div>
        				</div>
        			</td>
        		</tr>
        	</table>
        </div>

Au niveau JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function sauvegarde()
{
     XLOAD(true);
     // LONG TRAITEMENT
     XLOAD(false);
}
function XLOAD(action)
{
    if(action==true) {
        document.getElementById("divLoadingWaitingMsg").style.display = "block";
        alert("chargement... appuyez sur OK");
    }
    else {
        document.getElementById("divLoadingWaitingMsg").style.display = "none";  
    }
}

Je suis obligé de laisser le alert(...) qui est modal si je veux que l'effet désiré (message de chargement) se réalise. Si j'enlève l'alert, il n'y aura aucun affichage du div.

Est-ce que vous avez une idée pourquoi?

Le DOM ne doit pas avoir le temps de s'actualiser, essaie de placer la deuxième partie dans un mini setTimeOut, genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function sauvegarde()
{
     XLOAD(true);
     setTimeout(function() {
        // LONG TRAITEMENT
        XLOAD(false);
     }, 100);
}
function XLOAD(action)
{
    if(action==true) {
        document.getElementById("divLoadingWaitingMsg").style.display = "block";
        //alert("chargement... appuyez sur OK");
    }
    else {
        document.getElementById("divLoadingWaitingMsg").style.display = "none";  
    }
}

On pourrait d'ailleurs écrire ta fonction XLOAD comme ceci :

Code:

1
2
3
4
function XLOAD(action)
{
    document.getElementById("divLoadingWaitingMsg").style.display = action ? "": "none";
}

Merci! Problème résolu