Apply filters when loading post via ajax

Question

Have been trying to solve this for couple of hours already. Here's the case: I'm making a plugin that separates the posts into pages using the <!--nextpage--> tag. It works fine but I want to change the pages via ajax.

Below I'm showing how I do it but when the content is returned the_content filters are not applied and many functionalities are not showing (the pagination which I added and probably theme and other plugins functionality that is attached to the post).

Here's my ajax function:

jQuery(document).ready(function($) {
    $(document).on('click', '#upp-pagination a', function(event) {
        event.preventDefault();

        var page = $(this).parent().attr('class').replace(/\D/g, '');
        var postID = $('#upp-pagination').attr('class').replace(/\D/g, '');

        $.ajax({
            url: upppagination.ajaxurl,
            type: 'post',
            data: {
                action: 'load_page',
                page: page,
                postID: postID
            },
            success: function (result) {
                var newPage = result;

                $('div.entry-content').html(newPage);
            }
        });
    });
});

And this is the function on the back-end that returns the pages:

public function loadPage() {
    $postID = $_POST['postID'];
    $page = $_POST['page'];

    $post = get_post($postID);

    $content = $post->post_content;

    if ( false !== strpos( $content, '<!--nextpage-->' ) ) {
            $content = str_replace( "\n<!--nextpage-->\n", '<!--nextpage-->', $content );
            $content = str_replace( "\n<!--nextpage-->", '<!--nextpage-->', $content );
            $content = str_replace( "<!--nextpage-->\n", '<!--nextpage-->', $content );

            // Ignore nextpage at the beginning of the content.
            if ( 0 === strpos( $content, '<!--nextpage-->' ) )
                    $content = substr( $content, 15 );

            $pages = explode('<!--nextpage-->', $content);
    } else {
            $pages = array( $post->post_content );
    }

    $page = $pages[$page - 1];

    $response = apply_filters('the_content', $page);
    wp_send_json($response);
}

Am I using the right approach here and how I can apply the filters? Any ideas?

Answer 1

You might want to load all the items on the page at the same time, and use jQuery to display however many at a time. So for example:

By default you could load (to the DOM) and hide all of them, then load 4 at a time using jQuery's slice

Here's an example for my videos, however you could also hide the previous 4 videos before loading the next 4 to simulate what you are after:

<script>
$(function(){
    $(".video_single").hide(); //hide all div classes called container
    $(".video_single").slice(0, 4).fadeIn(); // show the first 4 container divs
    $("#load_more").click(function(e){ // click button to load more
        e.preventDefault();
        $(".video_single:hidden").slice(0, 4).fadeIn(800); // select next 4 hidden divs and show them

        if($(".video_single:hidden").length == 0){ // check if any hidden divs still exist
            $("#load_more").hide(); //if not more divs are hidden, hide button       
        }
    });
});
</script>