jQuery: AJAX e Wordpress

Tramite jQuery ed AJAX possiamo aggiungere delle caratteristiche in più al nostro sito in Wordpress. Si supponga di aver inserito le informazioni del profilo autore nella home page e in ciascun post. Vorremmo poter visualizzare un estratto della nostra pagina About senza dover ricaricare la pagina. Ecco come possiamo fare.

Definiamo alcuni stili CSS aggiuntivi per i contenuti che andremo a definire via AJAX:

a#close-info {
	background: #1b8be0;
	color: #fff;
	padding: 0.5em 1.5em;
}
 

.home #author-info #author-description div.author-content,
.singular #author-info #author-description div.author-content {
	margin: 1em 0;
}

span.loader {
	background: #ffc;
	padding: 0.5em 1.5em;
	color: #000;
	font-weight: bold;
	margin-left: 0.4em;
}

La prima cosa da fare con jQuery è definire l'URL da cui reperire la risorsa:

var BASEURL = 'http://' + location.host + '/';
var $url = BASEURL + 'about';

Quindi inseriamo un indicatore di caricamento dopo il link che conduce alla nostra pagina e lo nascondiamo:

$('a.meta-link').each(function() {
    	
    		var $a = $(this);
    		$('<span class="loader"/>').text('Caricamento...').
    		insertAfter($a).hide();
    	
});

Quindi definiamo un evento ajaxSuccess per nascondere nuovamente l'indicatore quando la richiesta AJAX è stata completata:

$('span.loader').ajaxSuccess(function() {
    	
    		$(this).hide();
    	
});

Definiamo ora un evento click di tipo live sul bottone di chiusura che genereremo dinamicamente:

$('#close-info').live('click', function(event) {
    	
    		$(this).parent().remove();
    	
    		event.preventDefault();
    	
});

Quindi associamo un evento click al link che punta alla nostra pagina e definiamo subito un evento ajaxStart per mostrare l'indicatore di caricamento:

$('a.meta-link').click(function(event) {
    	
    		$('span.loader').ajaxStart(function() {
    	
    			$(this).show();
    	
    		});
    	
    	    
            // continua
});

Adesso dobbiamo fare in modo di avere un riferimento all'antenato del nostro link ed evitare che il contenuto generato da AJAX (inserito nell'elemento author-content) venga duplicato ad ogni richiesta:

var $a = $(this);
var $div = $a.parent().parent();
$div.find('div.author-content').remove();

A questo punto inizia la richiesta AJAX vera e propria, la quale:

1. seleziona i primi paragrafi dell'elemento entry-content della pagina richiesta
2. elimina le eventuali immagini inserite al loro interno
3. assembla una stringa HTML con il contenuto di tali paragrafi

$.ajax({
    			type: 'GET',
    			url: $url,
    			dataType: 'html',
    			data: null,
    			success: function(html) {
    			
    				var context = $(html).find('div.entry-content');
    				var $p = $('p', context).slice(0, 4);
    				var content = '<div class="author-content">';
    				
    				$p.each(function() {
    				
    				    var p = $(this);
    				    
    				    if($('img', p).length > 0) {
    				    
    				    	$('img', p).remove();
    				    
    				    }
    				    
    					var pContent = p.html();
    					content += '<p>' + pContent + '</p>'
    				
    				
    				});
    				
    				content += '<a href="#" id="close-info">Chiudi</a></div>';
    				
    				
    				$(content).appendTo($div);
    				
    			
    			
    			}
 });
 

Specificando il tipo di dati html, jQuery restituisce un oggetto di tipo DOMDocument su cui possiamo operare come su qualsiasi altro documento HTML.