Conflit jquery ajax

[poupilou]

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 :

$(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 :

$(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.

 

[mickou51]

Je ferais comme ceci :

$(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)

 

[poupilou]

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.