Discussion :

[bebertrand]

Bonjour, je me heurte à un problème.

J'ai crée sur un site Wordpress dernière version, php 7.2 une page avec un menu filtre de catégorie.
En gros sur la page (BLOG) toutes les catégories apparaissent et un menu avec les différentes sous-catégories existent
qui permet de n'afficher que les sous-catégories sélectionnées; Pour ce menu j'ai crée une fonction en ajax.
Tout fonctionnes bien : Voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    function cat_ajax_get_3(catID) {
        var ajaxurl = '/wp-admin/admin-ajax.php';
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "filtre-blog", cat: catID }, /* filtre-noustrouver */
            success: function(response) {
                var $el = jQuery("#category-content-blog");
                $el.fadeOut(400, function(){
                    $el.html(response).fadeIn(400); /* RESPONSE */
                });
                return false;
            }
        });
    }
 
    jQuery( ".category-blog #category-menu a.ajax" ).click(function() {
        jQuery(".category-blog #category-menu a.ajax").removeClass("current");
        jQuery(".category-blog #category-menu a.ajax").removeClass("current");
        jQuery(this).addClass("current"); 
        var catnumber = jQuery(this).attr('data-term-number');
        cat_ajax_get_3(catnumber);
    });

Le problème c'est que chaque catégorie a un IMAGE DE UNE et qu'un script (blazy.js) est appliqué dessus.
Quand j'active le filtre du menu, l'image disparait... normal car il faut revalider le script blazy cf : bLazy

J'ai donc essayé cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
    jQuery(document).ready(function(){
        var mybLazy = new Blazy({ 
            selector: ".b-lazy" 
            , offset: 0 
            , container: "window"
            , successClass: "b-loaded"
        });
        mybLazy.revalidate();
    });

Mais cela ne fonctionne pas... Une idée ?

je me demandais si je ne devait pas plutôt appliquer une fonction au niveau de l'AJAX ?
J'avoue que j'ai pas mal cherché mais je suis perdu... Donc si vous pouvez m'éclairer ?

[Showie]

Salut,

pourquoi place ton revalidate sur document ready ? cet état ne se produit qu'une fois à la fin du chargement de ta page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function cat_ajax_get_3(catID) {
        var ajaxurl = '/wp-admin/admin-ajax.php';
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "filtre-blog", cat: catID }, /* filtre-noustrouver */
            success: function(response) {
                var $el = jQuery("#category-content-blog");
                $el.fadeOut(400, function(){
                    $el.html(response).fadeIn(400); /* RESPONSE */
                });
         var mybLazy = new Blazy({ 
            selector: ".b-lazy" 
            , offset: 0 
            , container: "window"
            , successClass: "b-loaded"
        });
        mybLazy.revalidate();
                return false;
            }
        });
    }
 
    jQuery( ".category-blog #category-menu a.ajax" ).click(function() {
        jQuery(".category-blog #category-menu a.ajax").removeClass("current");
        jQuery(".category-blog #category-menu a.ajax").removeClass("current");
        jQuery(this).addClass("current"); 
        var catnumber = jQuery(this).attr('data-term-number');
        cat_ajax_get_3(catnumber);
    });

c'est à chaque retour de ton ajax que tu dois revalider.

Sinon, pour information il vaux mieux que tu utilises la méthode done plutôt que la propriété success pour ton ajax.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$.ajax({
  url: "https://fiddle.jshell.net/favicon.png"
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Sample of data:", data );
    }
});

et pourquoi est ce que tu return false ? il n y a aucune raison de le faire.

[bebertrand]

Merci SHOWIE pour tes éclaircissements.
En vérité je maitrise bien le html, ccs, un peu moins le js et jquery et j'ai voulu creuser le principe de l'ajax.
Donc, comme plein de gens j'ai réadapté un script de github : le script
Mais bon, même si j'ai modifié son script il restait des erreurs. J'ai essayé de comprendre et de ne pas recopier bêtement... mais il restait des erreurs;

Pour le return false, j'avais un doute... c'est vrai que ça n'a rien à faire là.
Pour le reste je vais tester. Tes explications me paraissent logiques.
Pour le revalidate(), j'applique ce que dit le dev' de bLazy.js sur son site... En vrai il y a peu d'explications.
J'ai fait moi même un PLUGIN avec son script. Il marche bien sauf pour l'ajax.

Sinon j'étais en train d'explorer ce genre de chose.
Car si j'ai un autre appel AJAX : il faudra à nouveau que j'appel bLazy() ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
jQuery(document).ajaxSuccess(function() {
        var mybLazy = new Blazy({ 
        selector: ".b-lazy" 
        , offset: 0 
        , container: "window"
        , successClass: "b-loaded"
    });
    setTimeout(function(){ mybLazy.revalidate();},100);
});

[Showie]

Effectivement, si tu as plusieurs appel Ajax différents c'est une bonne idée utiliser ajaxSuccess pour factoriser le code.

[bebertrand]

Ok, j'essaye. Mais dans mon footer je vois le script blazy et après arrive le script ajax.
Je pensais que l'appel à new Blazy() allait relancer le script mais ça ne semble pas marcher.
pourtant que je fait une " alert('quelconque') " çà marche... C'est vraiment chelou...

Je vais continuer de creuser. Je peux donner l'adresse du site mais en privé uniquement si certains ont le courage ?

[Showie]

oui je t'ai répondu un peu vite seul le revalidate toi être réexécuté.

tu dois avoir les deux bouts de code séparé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
    jQuery(document).ready(function(){
        var mybLazy = new Blazy({ 
            selector: ".b-lazy" 
            , offset: 0 
            , container: "window"
            , successClass: "b-loaded"
        });
    });

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
jQuery(document).ajaxSuccess(function() {
    setTimeout(function(){ mybLazy.revalidate();},100);
});