Wordpress plugin: render only page content using ajax call
-
07-11-2019 - |
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