Isotope.js - Load Custom Post Types with AJAX. WordPress
- SOLVED
Hi there,
I am working on a website that uses Isotope.js to sort a portfolio. There is also a button that users can click to AJAX load more posts.
Here is a link to the temporary website: https://contactlenzes.com.
This is how I initiated Isotope.js:
// Portfolio isotope filter
$(window).load(function() {
var $container = $('.projects');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.taxonomies a').click(function() {
$('.taxonomies .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
And this is my AJAX file:
jQuery(function($){
var $content = $('.projects');
var $loader = $('#more_posts');
var ppp = 4;
var offset = $('.projects').find('.project').length;
$loader.on( 'click', load_ajax_posts );
function load_ajax_posts() {
if ( !($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts')) ) {
$.ajax({
type: 'POST',
dataType: 'html',
url: screenReaderText.ajaxurl,
data: {
'ppp': ppp,
'offset': offset,
'action': 'mytheme_more_post_ajax'
},
beforeSend : function () {
$loader.addClass('post_loading_loader').html( screenReaderText.loading );
},
success: function (data) {
var $data = $(data);
if ($data.length) {
var $newElements = $data.css({ opacity: 0 });
$content.append($newElements);
$content.isotope( 'appended', $newElements );
$content.isotope( 'reloadItems' ); // https://isotope.metafizzy.co/methods.html#reloaditems
$content.isotope('layout'); // https://isotope.metafizzy.co/methods.html#layout
$newElements.animate({ opacity: 1 });
$loader.removeClass('post_loading_loader').html(screenReaderText.loadmore);
} else {
$loader.removeClass('post_loading_loader').addClass('post_no_more_posts').html(screenReaderText.noposts);
}
},
error : function (jqXHR, textStatus, errorThrown) {
$loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown);
console.log(jqXHR);
},
});
}
offset += ppp;
return false;
}
});
Here is the problem!
The script the loads the posts. But when the posts are loaded Isotope.js does not recalculated the height of the container.
As you can observe in the attached image.
Pressing the filter button, fixes the issue.
So how can I force Isotope.js to recalculated the height of the container when new posts are added via AJAX?
Or replicate the effect pressing the filter button has... ?
I hope I am making sense.
Thank you for your time!
Answers (5)
Hai Bui answers:
.isotope('layout') should trigger recalculating the heights. I think possibly it doesn't because the images are not fully loaded before you call isotope('layout')
You can try adding imagesLoaded (https://imagesloaded.desandro.com/) and adding this:
$newElements.imagesLoaded(function(){
$content.isotope('layout');
});
Farid answers:
What you need to do is put your whole isotop code in a function.
function run_isotop($container){
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.taxonomies a').click(function() {
$('.taxonomies .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
}
And run your that function on window load something like this:
// Portfolio isotope filter
$(window).load(function() {
var $container = $('.projects');
run_isotop($container);
}
After that put that same function in the success function of your ajax call. I will put only concerned part of your ajax code as:
success: function (data) {
var $container = $('.projects');
run_isotop($container);
.... // put your remaning code here
}
However, put yoru ajax call code and isotop function code in the same file.
Let me know if you still face any issue.
Thanks
william3780 comments:
Will give it a try and update you! txs :)
william3780 comments:
https://contactlenzes.com/wp-content/themes/hd-holzbau/js/ajaxposts.js?ver=2.0
Updated the JS file as per your instructions, but with no success... Am I missing something?
Farid comments:
Please move the runIsotope(); function in ajax success function at the very bottom.
See this helping screenshot: http://jmp.sh/FVR0LG2
william3780 comments:
https://contactlenzes.com/wp-content/themes/hd-holzbau/js/ajaxposts.js?ver=2.5
Still no luck my friend.
mod mi answers:
you can add a $(filter_button_selector).trigger("click") for the button after the posts are loaded. Replace the 'filter_button_selector' with the id or class of the button.
william3780 comments:
https://contactlenzes.com/wp-content/themes/hd-holzbau/js/ajaxposts.js?ver=5.5
I tried that, but it's not working either :(
Pau answers:
try this instead:
$content.data('isotope').reloadItems();
$content.data('isotope').layout();
william3780 comments:
Just tried it... but did not work :(
Pau comments:
also add $(window).resize(); after.
Pau comments:
Nevermind my first suggestion. Instead:
Add
$(window).resize();
after
$content.isotope('layout');
Sébastien | French WordpressDesigner answers:
You must declare your code for isotope as a function, for example function My_isotope() and use this function onload and in your ajax code in "success: function (data) {"
william3780 comments:
Can you kindly show me an example, JS newbie here :)
Farid comments:
Please see my solution!
Sébastien | French WordpressDesigner comments:
First code become :
function MyIsotope() {
var $container = $('.projects');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.taxonomies a').click(function() {
$('.taxonomies .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
}
// Portfolio isotope filter
$(window).load(MyIsotope(););
the second code become :
jQuery(function($){
var $content = $('.projects');
var $loader = $('#more_posts');
var ppp = 4;
var offset = $('.projects').find('.project').length;
$loader.on( 'click', load_ajax_posts );
function load_ajax_posts() {
if ( !($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts')) ) {
$.ajax({
type: 'POST',
dataType: 'html',
url: screenReaderText.ajaxurl,
data: {
'ppp': ppp,
'offset': offset,
'action': 'mytheme_more_post_ajax'
},
beforeSend : function () {
$loader.addClass('post_loading_loader').html( screenReaderText.loading );
},
success: function (data) {
MyIsotope();
var $data = $(data);
if ($data.length) {
var $newElements = $data.css({ opacity: 0 });
$content.append($newElements);
$content.isotope( 'appended', $newElements );
$content.isotope( 'reloadItems' ); // https://isotope.metafizzy.co/methods.html#reloaditems
$content.isotope('layout'); // https://isotope.metafizzy.co/methods.html#layout
$newElements.animate({ opacity: 1 });
$loader.removeClass('post_loading_loader').html(screenReaderText.loadmore);
} else {
$loader.removeClass('post_loading_loader').addClass('post_no_more_posts').html(screenReaderText.noposts);
}
},
error : function (jqXHR, textStatus, errorThrown) {
$loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown);
console.log(jqXHR);
},
});
}
offset += ppp;
return false;
}
});
william3780 comments:
https://contactlenzes.com/wp-content/themes/hd-holzbau/js/ajaxposts.js?ver=2.0
Penny for your thoughts? :)
Sébastien | French WordpressDesigner comments:
Guys, create your thread, thanks !