Timber - WordPress, Append data (json) to Timber\Post Object after ajax call

Question

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);

        });



});

php function

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);





}

HTML is retunred, but it's only 1 post and the data isn't populating the twig markup.

old****

So on my blog page, I want to load more posts, and I'm wondering if I can just append the response data to the posts array aleady on the page. Or if need to build it out a certain way to allow for that.

Any tips/help etc would be greatly appreciated.

code samples below

I have the following set up in in my twig file:

{% 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 %}

Outputs the posts onto the page just fine.

I then make an ajax request doing the following:

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);

        });

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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();
}

Timber - WordPress, Append data (json) to Timber\Post Object after ajax call

Sign up