Question

I'm writing a plugins that renders json data from an API request and I need to implement an infinite scroll in a content page.

The problem is when I render the content with an ajax call, it renders all the page instead.

This is what I have done so far:

function enable_pagination() {
    jQuery(function($) {
        $('#show-more-button a').click( function(e) {
            e.preventDefault();
            $.ajax( {
                url: document.URL,
                data: { 'page': 2 },
                type: 'POST',
                dataType: 'html',
                error: errorHandler
            }).done( function( response ) {
                $('.list').append( response );
            });
        });
    });
}

EDIT: ADDING EVENTS_CONTROLLER CODE

public function festival( Array $shortcode_params ) {
            $collection_edition = $shortcode_params['collection_edition_id'];
            $festival_name = $shortcode_params['name'];

            if ( is_numeric( $collection_edition ) && $collection_edition > 0 ) {
                $this->initialize_params();
                $this->initialize_api_client();
                $date = array_key_exists( 'date', $this->params ) ? $this->params['date'] : date( 'Y-m-d' );
                $category = $this->params['category'];
                $page = isset( $this->params['page'] ) ? $this->params['page'] : 1;
                $events_by_festival = $this->api_client->from_day( $date, $collection_edition, $category, $page );

                // pagination
                if( $this->isAjax() )
                    return View::render( "events/partials/_list.php", array( 'events' => $events_by_festival ) );
                else
                    return View::render( "events/festival.html.php", array( 'date' => $date, 'category' => $category, 'festival' => $festival_name, 'events_by_festival' => $events_by_festival ) );
            }
            return false;
        }


private function isAjax() {
            return !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
        }

View is a custom class with some helpers ex: for rendering.

/**
         * Render the template, returning it's content.
         * @param $data array Data made available to the view.
         * @param $template string view file name to render
         * @return string The rendered template.
         */
        public static function render( $template, $data ) {
            extract( $data );
            ob_start();
            include( "views/$template" );
            $content = ob_get_contents();
            ob_end_clean();
            return $content;
        }

document.URL refers to an events_controller action that, when ajax request, returns only events_list partial view.

As I said before, in this case, ajax response contains, other than content, also the header, sidebar, footer, etc....

There is a clean way to achieve this?

Thank you in advance

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top