0

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?

2
  • I actually found that the filters are being applied but the is_single() function is not working through ajax. Still trying to solve this.
    – Gadzhev
    Commented May 5, 2016 at 9:45
  • is_single won't work in AJAX - it's a separate request that has no awareness of the query-type from the page that called it. Commented May 5, 2016 at 10:18

1 Answer 1

0

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>
1
  • 1
    That's a good solution but not quite SEO friendly which is core requirement for my plugin.
    – Gadzhev
    Commented May 5, 2016 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.