Le cas d’usage qui nous intéresse ici est celui-ci : une requête ajax est exécutée pour charger les items suivant d’une liste, par exemple les articles d’une page catégorie. Si vous affichez la totalité de l’article dans la page catégorie, il est fort possible que certains scripts de mise en page soient nécessaires au bon affichage de l’article (ex : unveil, cycle2, highlight). Dans ce cas, il faut leur demander de traiter les articles nouvellement chargés par la requête ajax.

Heureusement il y a un évènement jquery pour cela : ajaxComplete.

Prenons l’exemple de Highlight.js qui met en forme du code. Le script classique d’init de highlight.js ressemble à cela :

// Init highlighting
jQuery( document ).on( 'ready ', function() 
{
hljs.initHighlightingOnLoad() ;
}) ;

Et bien il suffira d’ajouter ce code pour que l’init soit déclencher à chaque requête ajax, sans s’exécuter sur les portions de code déjà traitées (c’est l’objet du sélecteur .post-listing pre > code :not(.hljs) – à noter que j’utilise .post-listing comme classe container de mes listes d’articles, c’est bien sûr à adapter en fonction de ce que vous utilisez) :

// Run highlighting on ajax loaded posts
jQuery( document ).on( 'ajaxComplete', function()
{
jQuery('.post-listing pre > code :not(.hljs)' ).each(function()
{
hljs.highlightBlock(this) ;
}) ;
}) ;

Le tout sera contenu dans un script d’init (highlight.init.js) dédié et appelé dans votre functions.php, en même temps que le script highlight.js et le css qui va avec, ce qui donne par exemple l’action suivante d’enregistrement des scripts et du css :

add_action( 'wp_enqueue_scripts', 'djth_highlight_register_style_script' ) ;
function djth_highlight_register_style_script()
{
if( $GLOBALS['pagenow'] != 'wp-login.php' && !is_admin() ) 
{
// register style
wp_register_style( 'highlight', get_template_directory_uri() . DJTH_EXTENSIONS_PATH . '/highlight/highlight.min.css', array( 'dj-theme' ), '1.0', 'all' ) ;
wp_enqueue_style( 'highlight' ) ;
// register script
wp_register_script( 'highlight', get_template_directory_uri() . DJTH_EXTENSIONS_PATH . '/highlight/highlight.min.js', array( 'jquery' ), '9.12.0', true ) ;
wp_enqueue_script( 'highlight' ) ;
wp_register_script( 'highlight.init', get_template_directory_uri() . DJTH_EXTENSIONS_PATH . '/highlight/highlight.init.js', array( 'highlight' ), '1.0.0', true ) ;
wp_enqueue_script( 'highlight.init' ) ;
}
}

Un autre exemple avec cycle2 (l’un des meilleurs carousels jquery). L’excellence de ce carousel est confirmée par le fait qu’on peut l’appeler autant de fois que l’on veut, il gère les carousels déjà en cours d’exécution :

// Init cycle2 on ajax loaded posts
// It is perfectly safe to run the code below multiple times without having to worry about slideshows that are already running
// (source : http ://jquery.malsup.com/cycle2/api/)
jQuery( document ).on( 'ajaxComplete', function() 
{ 
jQuery( '.cycle-slideshow' ).cycle() ;
}) ;

Un dernier exemple avec le script unveil.js qui permet de charger à la demande les images d’une page (lazyloading) :

// Unveil on ajax loaded posts
jQuery( document ).on( 'ajaxComplete', function() 
{ 
jQuery( 'img[data-unveil=true] :not(.unveiled)' ).unveil( 2000, function() 
{
jQuery( this ).load( function()
{
jQuery( this ).addClass( 'unveiled' ) ;
}) ;
}) ;
}) ;

 

 

Tags : ,

Classés dans :

Pour aller plus loin