IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Loading spinner sur une action non ajax


Sujet :

jQuery

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    mai 2007
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2007
    Messages : 75
    Points : 60
    Points
    60
    Par défaut Loading spinner sur une action non ajax
    Bonjour à tous,

    J'ai trouvé un tuto pour afficher une animation de chargement (loading spinner) lors d'une requête ajax en JQuery.
    Ce que je voudrais maintenant c'est pouvoir en afficher un également sur d'autres actions JQuery et notamment l'une d'elle qui prend beaucoup de temps à s'exécuter.
    Lors d'un click : on va checker toutes les lignes d'un tableau pour cocher leur checkbox et ensuite pouvoir leur appliquer au choix des modifications via une requête ajax qui récupère tous les "id" des lignes au checkbox coché.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    	$('li#tout_select').click(function() {
    		$("tbody input").each(function() {
    			$("tbody input").prop('checked', true).attr('checked', 'checked');
    			$("td.selection i").removeClass("fa-circle").addClass("fa-dot-circle");
    		});
    		// on compte le nombre d'éléments sélectionnés et on l'affiche :
    		var numberChecked = $("td.selection").children("[type='checkbox']:checked").length;
    		$("#selection p").text(numberChecked);
    	});
    Ce petit bout de code s'applique à parfois plusieurs milliers de lignes d'un tableau et l'utilisateur se demande ce qu'il se passe tout ce temps où rien ne s'affiche à l'écran.
    Est-ce qu'il faut ajouter des "pauses" tous les x éléments modifiés et alimenter une barre de progression (avez-vous un tuto dans le genre à m'indiquer ?) ?
    Dois-je complètement changer d'approche et limiter mon tableau en le scindant en plusieurs pages (sql limit) ?

    Merci pour votre retour

  2. #2
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 886
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 886
    Points : 3 577
    Points
    3 577
    Par défaut
    Bonjour,

    Citation Envoyé par Lexarino Voir le message
    Dois-je complètement changer d'approche et limiter mon tableau en le scindant en plusieurs pages (sql limit) ?
    Je pense que oui, tu dois passer par une pagination pour n'afficher que 10 lignes par page par exemple, parce que si le nombre de lignes est elevé, le chargement de la page html prendra beaucoup de temps à s'afficher.

    Pour l'icone de chargement (spinner), tu peux ajouter une condition dans la boucle $.each afin de vérifier si c'est la dérnière ligne ou pas (avec :last), si oui tu supprimes l'icone de chargement sinon ne rien faire.

  3. #3
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 647
    Points : 2 330
    Points
    2 330
    Par défaut
    Bonjour,

    Effectivement, habituellement on préfère faire une pagination.
    C'est plus fluide pour l'utilisateur et ce dès le chargement car si on imagine que les données viennent d'une DB et qu'elles sont infinies le chargement pour être extrêmement long.

    Evitez également d'utiliser attr(), ca réécrit tout le dom et c'est extrêmement lourd.
    A l'inverse, si vous utilisez uniquement prop() vous aurez quelque chose de beaucoup plus rapide.

    Je vous ai fait un test avec un tableau de 1000 lignes (et donc autant de checkbox), en haut de page vous pouvez choisir de cocher les cases uniquement avec prop() ou alors avec prop() et attr().
    Voici l'exemple: https://codepen.io/DarkStar123456/pen/NWgvmXK

    Résultats :
    Avec prop() : 270ms
    Avec prop() et attr() : ~14 secondes chez moi

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    mai 2007
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2007
    Messages : 75
    Points : 60
    Points
    60
    Par défaut
    Merci pour ces réponses hyper claires et rapides.
    Effectivement @darkstar123456 c'est bien plus rapide avec juste .prop(). Je n'arrive pas à retrouver la raison qui m'avait fait ajouter attr().
    Bien vu @Toufik83 pour le spinner qui se coupe avec la dernière itération de la boucle each du coup en attendant de scinder le tableau voilà ce que j'obtiens :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    	$('li#tout_select').click(function() {
    		var total_checkbox = $("tbody input").length;
    		$("tbody input").each(function(index) {
    			$body.addClass("loading"); // on met le loading
    			$("tbody input").prop('checked', true);
    			$("td.selection i").removeClass("fa-circle").addClass("fa-dot-circle");
    			if (index === total_checkbox - 1) { $body.removeClass("loading"); }
    		});
    		// on affiche le nombre d'éléments sélectionnés
    		$("#selection p").text(total_checkbox);
    	});
    Un énorme merci à vous les gars !

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    mai 2007
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2007
    Messages : 75
    Points : 60
    Points
    60
    Par défaut
    Etrange...

    Mon animation ne se joue pas...
    Si je supprime la boucle each pas de souci. Dès que je la remets dans le code, l'animation ne se lance pas.
    Comme si JQuery s'élançait bille en tête sur la boucle et ne "prenait pas le temps" d'activer l'animation.
    J'ai sorti l'animation de la boucle et ajouté même un delay() mais même chose :/

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    	// tout selectionner :
    	$('li#tout_select').click(function() {
    		$("body").addClass("loading").delay(100); // on met le loading
    		var total = $("tbody input").length;
    		$("tbody input").each(function(index) {
    			$("tbody input").prop('checked', true);
    			$("td.selection i").removeClass("fa-circle").addClass("fa-dot-circle");
    			if (index === total - 1) { $("body").removeClass("loading"); }
    		});
    		// on compte le nombre d'éléments sélectionnés
    		$("#selection p").text(total);
    	});

  6. #6
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 886
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 886
    Points : 3 577
    Points
    3 577
    Par défaut
    Bonjour,

    Avez-vous essayer un délais inférieur à 100 ms ?

  7. #7
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 647
    Points : 2 330
    Points
    2 330
    Par défaut
    Bonjour,

    J'ai mis à jour mon code ici : https://codepen.io/DarkStar123456/pen/LYLzaBG
    En mettant le code dans un setTimeout(), ça permet de laisser le temps au javascript d'ajouter la classe à l'élément du loader.

    Ici un autre exemple avec l'utilisation de Promise() mais toujours basé sur le même principe de laisser du temps à la classe de s'ajouter : https://codepen.io/DarkStar123456/pen/OJgxqQx

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. cause d'une action non lancée
    Par abertaud dans le forum JSF
    Réponses: 6
    Dernier message: 12/09/2006, 12h20
  2. redirection sur une action qui ne marche pas
    Par nesbla dans le forum Struts 1
    Réponses: 5
    Dernier message: 04/08/2006, 20h16
  3. Afficher un fond sur une action bouton
    Par lordenzo dans le forum Flash
    Réponses: 6
    Dernier message: 31/03/2006, 12h47
  4. [Struts]Variable dans une action non réinitialisé
    Par brousaille dans le forum Struts 1
    Réponses: 7
    Dernier message: 15/01/2006, 00h53
  5. onChange pas déclanché sur une action javascript ?
    Par Oluha dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/06/2005, 16h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo