Problème sur jquery avec fonction asynchrone

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par emualliug, 6 Septembre 2022.

  1. emualliug
    emualliug WRInaute impliqué
    Inscrit:
    1 Février 2020
    Messages:
    510
    J'aime reçus:
    122
    Bonjour à tous,

    J'ai un soucis sur un script, je sens vaguement d'où vient le problème, mais je ne vois pas trop comment le résoudre. Je mets la partie pertinente du code :

    Code:
    $('.bouton').click( function (){
        button = this;
        button.disabled = true;
         
        $.ajax({
            //sans surprise
        })
        .always(function(){
            button.disabled = false;
        });
    
    });
    
    C'est sans grande originalité, j'ai une page avec un certain nombre de boutons, et je veux exécuter une action côté serveur en AJAX. Je vous ai pas mis la partie AJAX qui est sans surprise et ne pose pas problème, les data envoyées dépendent d'un attribut data- différent à chacun des boutons que je récupère aisément. Jusque là, pas de difficulté, ça fonctionne.

    Le problème, c'est la façon dont le .always() est traité au retour de l'appel AJAX. Si ça prend un peu de temps et que l'utilisateur a cliqué sur un autre bouton avant que la première requête soit finie (ce que je ne souhaite pas interdire), ce sera cet autre bouton qui sera traité lors de l'appel à la fonction always(). En conséquence le premier bouton ne sera jamais réactivé, alors que le second bouton sera réactivé trop tôt.
     
    #1 emualliug, 6 Septembre 2022
    Dernière édition: 6 Septembre 2022
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 207
    J'aime reçus:
    365
    Code:
    button = this;
    Tu crées window.button et à chaque click ça écrase le précédent. Il faut mettre :
    Code:
    let button = this;
     
    emualliug apprécie ceci.
  3. emualliug
    emualliug WRInaute impliqué
    Inscrit:
    1 Février 2020
    Messages:
    510
    J'aime reçus:
    122
    Mais oui ! Merci !

    Je suis décidément moins à l'aise avec JavaScript, c'est tout bête, mais je n'y aurais pas pensé.

    Pour compléter, mon objectif initial était également de pouvoir tempérer le caractère actif du bouton, pour éviter les double-clics malencontreux et rendre plus apparent l'action côté UX, avec un setTimout sur le always() :

    Code:
        .always(function(){
            setTimeout(function(){
                button.disabled = false;
            }, 500);
        });
    
    Et désormais ça marche parfaitement ! Merci encore.
     
    spout apprécie ceci.
Chargement...
Similar Threads - Problème jquery fonction Forum Date
Problème avec un menu en ajax via jquery Problèmes de référencement spécifiques à vos sites 6 Février 2022
Problème Firefox 17 avec jQuery et interprétation de code JS Développement d'un site Web ou d'une appli mobile 23 Décembre 2012
Problème Script jquery qui permet de modifier l'apparence d'un select Développement d'un site Web ou d'une appli mobile 20 Février 2011
Probleme recup valeur slider jquery ... Développement d'un site Web ou d'une appli mobile 29 Décembre 2010
Problème avec Jquery et les UI Tabs Développement d'un site Web ou d'une appli mobile 17 Juin 2009
problème avec mon site Demandes d'avis et de conseils sur vos sites Lundi à 15:35
Probleme tag sur Google tag manager Demandes d'avis et de conseils sur vos sites 24 Novembre 2022
Probleme Tag sur Google Tag Manager Google Analytics 18 Novembre 2022
Gros problème sur la profondeur de mes pages Problèmes de référencement spécifiques à vos sites 30 Septembre 2022
Problème de htaccess chez Ionos URL Rewriting et .htaccess 12 Septembre 2022
Problème de crawl et d'indexation Crawl et indexation Google, sitemaps 1 Septembre 2022
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web 8 Août 2022
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022
Problème d'indexation de backlinks Problèmes de référencement spécifiques à vos sites 21 Juillet 2022
Probleme de visibilité de ma page Facebook Facebook 5 Juillet 2022
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022