Recharger les scripts JS après une requête en AJAX

Shadows
Javascript

Hello !

Je viens vers vous car je suis confronté à un problème et je n'ai pas trouvé de solutions valable sur Stackoverflow. Mon problème est qu'à l'execution d'une requête en AJAX pour modifier le continue de ma div principale (une navigation dynamique), les fonctions de mes scripts ne s'executent plus.

Voici ma requête en Ajax :

function menuPageRequest() {
    $('body').on('click', 'a.ajx-request', function(e) {
        e.preventDefault();
        $('#loader').fadeIn();

        var target = $(this).attr('href');
        var slug = target.split(siteURI + '/').pop();
        $.ajax({
            type: "POST", 
            url: target,
            cache: true,
            success : function( result ) {
                $('#menuWrapper').fadeOut(500, function() {
                    $('body').removeClass('no-scroll');
                    var myPage = $('.contenu', result).html();
                    $('#page .contenu').empty();
                    $('#page .contenu').append(myPage).promise().done(function(){
                        $.address.value(slug);
                        $('#loader').fadeOut();
                        verticalAlign();
                    });
                });
            }
        });
    });
}

Une idée ? ^^

6 réponses

lolotoobo
Réponse acceptée

Si tu as des plugins, des fonctions, des variables qui utilisent des champs, ... bien sur qu'il faut les réinitialiser lors du chargement. Le cas le plus con est si tu as une fonction qui a besoin de la hauteur de ton document. Si tu change le contenu tu vas changer la taille. Il te faut donc la recalculer sinon ca foire tout :)

Dans la logique charger une page "normale" ou ajax c'est la même chose. donc initialiser les composants, ... n'oublie pas que selon les composants, il faudra d'abord supprimer ceux qui ne servent plus (pas obligé mais des fois ca peut provoquer des soucis)

Utiliser le selecteur comme je t'ai indiqué permet simplement de "propager" au nouveau contenu les triggers rien de plus. Si dans ton nouveau contenu tu as des liens en .ajx-request la fonction marchera toujours c'est tout.

lolotoobo

Essaie

$(document).on('click',.....)
antho07

Bonjour,

Il est normal que les fonctions de tes scripts ne s’exécutent plus, puisqu'elles réagissent j'imagine, à des listeners placés par jquery sur les éléments présent au moment ou il a parsé la page, c'est à dire au premier chargement.

Pour que les scripts continuent à fonctionner après modification du dom, il faut attacher les évènements déclencheurs non pas aux éléments eux-même, mais à un conteneur parent présent dès le début. (regarder la documentation du $(truc).on ).
Ainsi, les évènements propagés par les différentes actions utilisateurs seront bien intercepté par ce parent fixe durant leurs propagations dans le dom.

cordialement

Antho

Shadows
Auteur

Bonjour,
j'ai un truc de ce style :

(function($) {
    $(document).ready(function() {
        /* Home */
        homeLogosPositions();
        homeFullScreen();

        /* AJAX */
        menuPageRequest();
        projectsFilters();
        /* Masonry */
        initMasonry();
    });
    $(window).resize(function() {
        /* Home */
        homeFullScreen();
        /* Tools */
        verticalAlign();
    });
    $(window).load(function() {
        /* Tools */
        verticalAlign();

        /* Tools */
        //verticalAlign();
    });
})(jQuery);

Du coup comment je dois procéder pour résoudre le problème ? Car les événement sont pointés sur document et window qui sont des éléments fixes lors de la requête en AJAX.

lolotoobo

Par exmemple :

function menuPageRequest() {
$('body').on('click', 'a.ajx-request', function(e) {
});

deviendra

function menuPageRequest() {
    $(document).on('click', '.ajx-request', function(e) {
});

Tu comprendras mieux avec cette vidéo

Shadows
Auteur

Très bien merci :)

Seulement ça n'y change rien. En gros au click sur les boutons ayant la classe .ajx-request dans le document, je charge du contenu dans une div content qui est contenu dans le body. Du coup toute mes fonctions ne comprennent pas qu'il y a du contenu mise à jour. Du coup, je pense qu'il faut que j'utilise le selecteur 'on' everywhere, non ?