Conflit jquery ajax

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 10 Février 2022.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Salut à tous,

    J'ai un petit souci avec l'ouverture de mon menu en jquery ajax.

    Pour ouvrir mon menu, le clique sur un <button class="openbtn">, j'ai cette fonction jquery qui permet son ouverture :
    Code:
    $(document).on('click','.openbtn',function(){
        $.ajax({
            url: '../scripts/popupMenu.php',
            timeout: 5000,
            success: function (data) {         
                document.getElementById("mySidebar").style.width = "300px";
                $('#mySidebar').html(data);         
                document.getElementById("main").style.marginLeft = "300px";
            }
        });
    });
    
    Sur la page qui affiche mes produits j'ai une image loader qui fait patienter l'utilisateur en attendant le chargement complet de ces produits. Cette image est affichée au chargement de la page via ce code jquery :
    Code:
    $(function(){
    /* Code javascript ici */
    $(document).ajaxStart(function() {
    var loader = "../images/ajax-loader-2.gif";
    $('#frame_page').html('').html('<br><br><br><br><div style="text-align:center;"><img src="' + loader + '" alt="#"></div>');
    });
    /* Code javascript ici */
    });
    Le souci c'est que lorsque je clique sur mon <button class="openbtn"> pour ouvrir mon menu, il s'ouvre parfaitement bien mais ça exécute aussi le code jquery du loader $(document).ajaxStart(function() et mes produits ne sont plus affichés, l'image du loader masque mes produits. Mes produits et le loader sont chargés dans la même div frame_page.

    Comment solutionner ce problème ?

    Merci pour vos réponses.
     
  2. mickou51
    mickou51 WRInaute discret
    Inscrit:
    8 Janvier 2016
    Messages:
    205
    J'aime reçus:
    22
    Je ferais comme ceci :

    Code:
    $(document).on('click','.openbtn',function(){
    // mettre l'image loading ici
        $.ajax({
            url: '../scripts/popupMenu.php',
            timeout: 5000,
            success: function (data) {        
                document.getElementById("mySidebar").style.width = "300px";
                $('#mySidebar').html(data);        
                document.getElementById("main").style.marginLeft = "300px";
    // mettre la suppression du loading ici
            },
    error: function () {    
    // mettre la suppression du loading ici et afficher l'erreur du chargement de la page popupMenu.php
    }
        });
    });
    et retirer le code du ajaxStart (que j'connais même pas et que j'utilise jamais)
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Merci pour ta réponse.

    J'ai trouvé une solution, il suffit de remplacer $(document).ajaxStart(function() par $(window).on("load", function() et ça ne déclenche plus le loader lorsque j'ouvre mon menu.
     
Chargement...
Similar Threads - Conflit jquery ajax Forum Date
Conflit entre jquery et prototype Développement d'un site Web ou d'une appli mobile 27 Septembre 2011
Conflit entre 2 jQuéry Développement d'un site Web ou d'une appli mobile 20 Novembre 2010
WordPress Conflit href et canonical Référencement international (langues, pays) 22 Mars 2021
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Conflit GA et GTM Google Analytics 11 Février 2020
Conflit de redirection avec les www URL Rewriting et .htaccess 5 Décembre 2019
Conflit entre mon filtre de vue Analytics et mon objectif Google Analytics 25 Octobre 2019
Page d'accueil non indexée ? Conflit avec robots.txt Crawl et indexation Google, sitemaps 2 Octobre 2019
WordPress Conflit Yoast SEO / Rating Widget Problèmes de référencement spécifiques à vos sites 6 Août 2019
WordPress Conflit de hreflang Référencement Google 12 Juin 2019
Conflits d'attributs hreflang dans le code source de page Débuter en référencement 24 Avril 2019
Conflit de redirection 301 et Urlrewriting Netlinking, backlinks, liens et redirections 20 Février 2019
Résolu Conflit de redirection dans le .htaccess Débuter en référencement 14 Décembre 2017
Problème de conflit javascript Développement d'un site Web ou d'une appli mobile 26 Juin 2017
Conflit avec Booking.com, comment gérer ? Autres réseaux sociaux 26 Janvier 2017
Conflit de Domain Administration d'un site Web 5 Février 2016
nom de domaine en .org et .com conflit possible ? Noms de domaine et référencement 15 Avril 2015
Conflit entre 2 pages sur URL Rewriting URL Rewriting et .htaccess 27 Janvier 2015
Conflits CSS Développement d'un site Web ou d'une appli mobile 6 Novembre 2014
Problème/conflit "RedirectPermanent" et Url rewirting URL Rewriting et .htaccess 29 Août 2014