Bonjour à tous,

Je cherche à concevoir un système de loading sur mes pages qui s'active dès que je clic sur un bouton et qui affiche une belle animation jusqu'à ce que l'opération soit terminée.

Pour un changement de page simple (changement de rubrique grâce à un clic dans un menu par exemple), rien de plus simple. Au clic je rend visible (display CSS) une image masquée (sablier gif animé) et celle-ci prend fin dès que la nouvelle page est affichée.

Sauf que je voudrais aussi le même système sur un bouton qui exporte des données (site en PHP).
Mon export CSV est généré à coup de header PHP du type :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
header('Content-Disposition: attachment; filename="fichier.csv"');
header('Expires: 0');
header('Pragma: cache');
header('Cache-Control: private');
header('Content-Type: text/csv');
echo $csv;
exit;
Le souci c'est que dans ce cas un clic sur le bouton "exporter" affiche bien le loading mais vu qu'il n'y a pas de rechargement de page après, celui-ci ne se désactive jamais. Un fois que le traitement PHP est terminé, une boite de dialogue surgit et me propose de télécharger ou d'ouvrir le fichier. Mais quoi que je choisisse, ceci n'a aucun effet sur le loading et c'est totalement logique.

J'ai donc cherché à trouver une solution.
1ère idée : capter l'arrivée de la boite de dialogue et lancer un script JS masquant le loading. Mais impossible de capter ce genre d'évènement (enfin je crois).

2ème idée, lancer un script JS juste avant l'export grace à un echo "<script>...</script>" en PHP. Pas propre du tout et surtout incompatible avec l'export car le moindre "echo" fait échouer le téléchargement forcé.

3ème idée, afficher le loading que pendant un délais défini. Mais lequel ? Mon export peut prendre 10s à 3min, quelle durée je donne à mon timmer ?

J'ai bien songé aussi à une méthode qui marcherait mais bien trop lourde : une fois le traitement PHP effectué, avant de générer le code qui va proposer le téléchargement, je pourrais mémoriser (en session par exemple) un marqueur et aller vérifier l'existence de ce marqueur côté client grâce à de l'AJAX toutes les 2s et masquer le loading si je le détecte.
Mais là je détourne le problème, c'est le client qui est obligé de trouver quand il doit couper le loading alors que je voudrais que ce soit le serveur qui donne le top.

Je ne vois pas de solution car mon serveur - sans faire un retour client entre le traitement et la génération de l'export - ne peux en aucun cas communiquer avec le côté client.

Je voudrais donc savoir si vous avez des idées pour obtenir un loading qui s'ouvre sur un clic et qui se termine lorsque la boite de dialogue de téléchargement s'affiche.

Pourquoi pas une direction totalement différente.

Merci à vous de m'avoir lu.