update 3
Please see answer below! Can provide further explanation there on request if needed
Update 2
js
$archiveLayout.on('click',loadMoreButtonID,function(){
let pageCount = $(this).attr('data-page'),
nextPage = parseInt( $(this).attr('data-page') ) + 1;
let getParams;
_.each($loadMoreButton, function(item) {
let thisData = window.$(item).data()
getParams = thisData;
});
console.log(getParams);
$.post(ajaxurl, getParams,function(response){
// var json_obj = JSON.parse(res);
console.log(response);
console.log(response.data);
}).done(function(){
$('#load-more').attr('data-page', nextPage);
});
});
add_action('wp_ajax_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
add_action('wp_ajax_nopriv_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
function ajax_more_all_posts()
{
$response = array(
'data' => Timber::compile(array('templates/blocks/content.twig'), $context)
);
wp_send_json($response);
}
{% for post in posts %}
{% set postCount = loop.index %}
{% set postImage = TimberImage(post.get_field('preview_image_post'))|resize('medium_large') %}
{% include "blocks/content.twig" with {post: post} %}
{% endfor %}
window.axios.get(fancySquaresRestUrl + 'wp/v2/posts', {
params: getParams
})
.then(function (response) {
// append the entire repsonese? wasn't working, could be doing it wrong
_.each( response.data, function( post, index ) {
//append each object on its own maybe???
});
})
.catch(function (error) {
console.log(error);
});
The full answer is as follows: (this is not appending anything to the Timber/Post Object, this is appending HTML from the data that get's passed to the twig file)
Any questions or comments you have about the below code feel free to ask.
The js used:
$archiveLayout.on('click',loadMoreButtonID,function(){
var $this = $(this);
var pageCount = $(this).attr('data-pageCount');
var nextPage = parseInt($(this).attr('data-page')) + 1;
var getParams = void 0;
_.each($loadMoreButton, function (item) {
var thisData = window.$(item).data();
getParams = thisData;
});
getParams.pagecount = pageCount;
// console.log(getParams);
$loader.fadeIn();
$loadMoreButton.fadeOut();
$.post(ajaxurl, getParams, function (response) {
// var json_obj = JSON.parse(res);
// console.log(response);
//console.log(response.data);
if(response === 'nomore'){
$loadMoreButton.fadeOut();
} else {
for(var hp = 0; hp < response.length; hp++){
$('[data-js="append-content"]').append(response[hp].data);
$this.attr('data-pageCount', Number(pageCount)+1);
}
$loadMoreButton.fadeIn();
}
}).done(function () {
$loader.fadeOut();
// $('#load-more').attr('data-page', nextPage);
});
});
the function being called:
add_action('wp_ajax_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
add_action('wp_ajax_nopriv_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
function ajax_more_all_posts()
{
$cat_id = $_REQUEST[ 'cat' ] or $_GET[ 'cat' ];
$paged = $_REQUEST['pagecount'];
$cat = $_REQUEST['dataCat'];
$args = [
'cat' => $cat_id,
'posts_per_page' => 9,
'post_status' => 'publish'
];
if($paged != ""){
$args['paged'] = $paged;
}
$posts = Timber::get_posts($args);
$message = [];
if($posts){
foreach($posts as $post){
$response = array(
'data' => Timber::compile('templates/blocks/content.twig', ['post' => $post])
);
$message[] = $response;
}
} else {
$message = "nomore";
}
wp_reset_query();
wp_reset_postdata();
wp_send_json($message);
die();
}