Modifier l'affichage d'une <DIV>

**tribaleur** · 04/02/2015, 16h13

Bonjour.

J'ai une page HTML dans laquelle j'ai un formulaire. A la soumission du formulaire, je souhaite afficher un écran de chargement.
L'écran de chargement est une <DIV> qui n'est pas affichée (display : none; ). Je souhaite juste changer la valeur display de cette dernière par le JS.

J'ai créé le code ci-dessous, mais cela ne fonctionne pas.

Le display de ma <DIV> n'est pas modifié par le JS. Ou le JS n'est pas appelé à la soumission du formulaire. Comme je suis assez novice dans le domaine du web je ne vois pas d'où vient le soucis.

Pourriez-vous m'aider?

le fichier HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
	<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Vérification de fichiers CSV</title>
            <script src="JS/Functions.js"></script> //Déclaration du JS ici
	    <link href="CSS/css.css" rel="stylesheet" />
        </head>
	<body>
		<div class="fileForm">
			<form name="chooseFile" method="post" action="index.php" enctype="multipart/form-data" onsubmit="toggleLoadScreenON();"> //J'appel le JS ici
     			   <label>Fichier CSV à vérifier : </label><input type="file" name="csvfile" id="csvfile" required/><br />
     			   <input type="submit" name="submit" value="Envoyer"/>     		
     		        </form>
		</div>
		<div class="fileContent csvContent"> ... </div>
		<div class="fileContent logResult"><?php ... ?></div>
		<div class="loadScreen"></div> // C'est cet élément que je souhaite afficher
	</body>
</html>

Le fichier JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// Permet d'afficher l'écran de chargement
function toggleLoadScreenON (){
	var loadScreen = document.getElementById("loadScreen");
 
	loadScreen.style.display = "block";	
}

Je précise que les commentaires en HTML sont uniquement dans ce poste à titre indicatif.

Merci d'avance pour votre aide!!

**SpaceFrog** · 04/02/2015, 16h15

Ton souci majeur est que qui dit soumission de formulaire.. dit rechargement de page

**tribaleur** · 04/02/2015, 16h25

En fait, quand je valide le formulaire, ça recharge la page mais avec un traitement php assez long. (je traite des fichiers CSV)
Du coup l'idée c'est de faire apparaitre un load-screen avec un gif animé pour bien montré à l'utilisateur que le navigateur est en cour de travail.

Ce qui fait que quand le formulaire est soumit :
-le loadscreen s'affiche.
-La page se recharge
-Traitement php du fichier csv en plusieurs seconde (5-10)
-Le traitement php est fini, le navigateur actualise l'affichage de la page. (donc le loadscreen disparait)

En tout cas c'est ce que j'ai compris comme fonctionnement

**SpaceFrog** · 04/02/2015, 16h46

Oui ta chronologie est correct, mais malgré que le traitement php soit long, il se peut que ton serveur commence a envoyer du html au navigateur assez rapidement du coup la page précédente n'existe plus...
Du coup il serait peut être plus judicieux de mettre ton div visible au chargement de ta page et de le faire disparaitre sur le onload de ta page

**tribaleur** · 04/02/2015, 17h34

Du coup, pour être sure j'ai laissé l'ancien traitement tout en implémentant ta solution.
... mais ça ne fonctionne toujours pas.

Pour résumé ce que j'ai fait :
-J'ai mis comme valeur normal display = block; dans mon CSS.
-A la fin du chargement de la page je modifie le display en "none" par le JS.
-Quand le formulaire est soumit, je modifie de nouveau le display en "block"

Dans le fichier HTML j'ai rajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="toggleLoadScreenOFF();">

Dans mon fichier JS j'ai rajouté la fonction JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Permet de cacher le loadscreen
function toggleLoadScreenOFF (){
	var loadScreen = document.getElementsByClassName("loadScreen");
 
	loadScreen.style.display = "none";	
}

Les fonctions sont quand à elles bien appelées car, si je remplace leur contenu par "alert('coincoin')" ... le popup s'ouvre bien.
Le problème viens donc dans mon code JS ... mais je ne vois pas où est le soucis :s

***EDIT*** : je viens de me rendre compte que j'essaye de récupérer une class avec "getElementById". Du coup je les ai remplacé par des "getElementsByClassName" ... mais ça ne fonctionne quand même pas.

**SpaceFrog** · 05/02/2015, 08h53

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var loadScreen = document.getElementsByClassName("loadScreen");
 
	loadScreen.style.display = "none";

getElementsByClassName

le "s" indique que la methode retourne une collection ...
tu ne peux pas applique un style directement à une collection en js (ce n'est pas distributif)

**tribaleur** · 05/02/2015, 10h23

GENIAL!!!

Je n'avais pas du tout fait attention à ce détail qui change tout!!
Du coup pour que ça fonctionne, il faut utiliser le résultat de la fonction "getElementsByClassName" comme un tableau. Ce qui est normal car la fonction retourne une collection!

J'ai cependant légèrement amélioré ma fonction JS pour n'en avoir qu'une au lieu de deux.
Si on reprend le code en intégralité, ça donne donc :

Le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
	<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Vérification de fichiers CSV</title>
            <script src="JS/Functions.js"></script> //Déclaration du JS ici
	    <link href="CSS/css.css" rel="stylesheet" />
        </head>
	<body onload="toggleLoadScreenDisplay('none');"> //Je cache le LoadScreen à la fin du chargement de la page
		<div class="fileForm">
			<form name="chooseFile" method="post" action="index.php" enctype="multipart/form-data" onsubmit="toggleLoadScreenDisplay('block');"> //J'affiche la loadscreen en attendant le rechargement de la page
     			   <label>Fichier CSV à vérifier : </label><input type="file" name="csvfile" id="csvfile" required/><br />
     			   <input type="submit" name="submit" value="Envoyer"/>     		
     		        </form>
		</div>
		<div class="fileContent csvContent"> ... </div>
		<div class="fileContent logResult"><?php ... ?></div>
		<div class="loadScreen"></div> // C'est cet élément que je souhaite afficher
	</body>
</html>

Le Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Permet de modifier le display du premier élément HTML avec la class "loadScreen"
function toggleLoadScreenDisplay (display){
	var loadScreen = document.getElementsByClassName("loadScreen");
 
	loadScreen[0].style.display = display;
}

Le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.loadScreen{
	display:block;
        ...
}

Sinon pour information : Le loadScreen s'affiche bien au submit du formulaire. Et non pas au chargement de la page. Je le laisse cependant aux deux endroits, par sécurité.

En tout cas merci de votre aide!!!

Modifier l'affichage d'une <DIV>

JavaScript

Discussions similaires

Partager

Partager