WordPress plugin: render only page content using ajax call

Your code is a bit complex, so I can’t post a full-working code, but a proof of concept, then adapt to your code is up to you.

So, Ajax in WordPress should be used via Ajax API, instead to send a request to same url, that of course print header, and other stuff, simply send a request via Ajax Api and output what you want.

I assume that you have a code like:

add_shortcode( 'festival' , array( new Events_Controller, 'festival' ) );

and festival() method of Events_Controller class it the one you posted. It seems that the only 2 params you get from shortcode are 'collection_edition_id' and 'name' all other params are generated (I guess) by Events_Controller::initialize_params() method (probably based on request).

So, if your Events_Controller::festival() method can take arguments from another source than shortcode than it can do its work in the same way. Look at this code:

public function festival( Array $params = array() ) {

  if ( ! $this->isAjax() ) ) {
    $collection = isset( $params['collection_edition_id'] )
      ? $params['collection_edition_id']
      : 0;
    $festival = isset( $params['name'] ) ? $params['name'] : '' ;
  } elseif ( empty( $params ) ) {
    $collection = filter_input(INPUT_POST, 'collid', FILTER_SANITIZE_NUMBER_INT);
    $festival = filter_input(INPUT_POST, 'festival_name', FILTER_SANITIZE_STRING);
  }

  if ( empty($collection) || ! is_numeric($collection) ) {
    // WordPress Ajax API need to die() on end or will append a 0 to the response
    if ( $this->isAjax() ) die();
    return;
  }

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

  if ( ! $this->isAjax() ) ) {
    wp_enqueue_script(
      'my_ajax_script',
      plugins_url( 'js/my_ajax.js', __FILE__ ),
      array('jquery'), NULL, TRUE
    );
    $data = array( 'ajax_url' => admin_url( 'admin-ajax.php' ) );
    wp_localize_script( 'my_ajax_script', 'MyScriptData', $data );
  }

  if( $this->isAjax() ) {
     View::render(
       "events/partials/_list.php", array( 'events' => $events_by_festival )
     );
     // WordPress Ajax API need to die() on end or will append a 0 to the response
     die();
  } else {
    return View::render(
      "events/festival.html.php",
      array(
        'date' => $date,
        'category' => $category,
        'festival' => $festival,
        'collection' => $collection, // <-- pass also the collection
        'page' => $page, // <-- pass the page
        'events_by_festival' => $events_by_festival
      )
    );
  }

}

As you can see I made the $params argument optional and I make possible send to the method collection id and festival name via a POST ajax request, instead of via shortcode atts, the result is that you can run that method outside of a shortcode.

I’ve also used wp_enqueue_script to add a javascript file in the footer, and in that file (that I assumed is ‘js/my_ajax.js’ relative to your plugin folder) you should put the code to trigger the ajax call.

Finally using wp_localize_script I send to that script a variable: MyScriptData that will contain in the ajax_url property the correct url of 'admin-ajax.php' (i.e. inside that script you can use MyScriptData.ajax_url to access the url).

The method now became very “large” and probably is better split it into parts, e.g. the javascript stuff can be put in another method, just like the render stuff.

Now you have to create the ajax api call to run the method:

add_action( 'wp_ajax_myplugin_festival', array( new Events_Controller, 'festival' ) );
add_action( 'wp_ajax_nopriv_myplugin_festival', array( new Events_Controller, 'festival' ) );

previous code means that when you send a request to admin-ajax.php where $_REQUEST['action'] is equal to 'myplugin_festival' (the part after ‘wp_ajax_’ and ‘wp_ajax_nopriv’) then Events_Controller::festival is called by WordPress.

So the only thing that you need to do is send a POST request to admin-ajax.php where ‘action’, ‘collid’ and ‘festival_name’ POST variables are set correctly.

However ‘action’ must me hardcoded to ‘myplugin_festival’, but ‘collid’ and ‘festival_name’ should be set accordingly to what the shortcode are showing: the easiest way to do the trick is set a data- argument inside the html markup printed by shortcode.

In OP you didn’t posted your template, so I don’t know how it is structured, however as proof of concept I assume there is a container div, where you can set data:

<div class="festival-container" id="festival-container-<?php echo $collection; ?>"
   data-collid="<?php echo $collection; ?>"
   data-festival="<?php echo $festival; ?>"
   data-page="<?php echo $page; ?>">

Off course you need to pass to your templates $festival,$collection and $page variables.

So, your js file (that in previous code I assumed is 'js/my_ajax.js' file in your plugin folder) write:

jQuery(document).ready( function($) {

  $( document ).on( 'click', '.festival-container .show-more-button a', function(e) {  
    e.preventDefault();
    var $container = $(this).closest('.festival-container');
    var collection = $container.data('collid');
    var festival = $container.data('festival');
    var paged = $container.data('page') + 1;
    $.ajax( {
      url: MyScriptData.ajaxurl,
      data: {
        action: 'myplugin_festival',
        page: paged,
        coll_id: collection,
        festival_name: festival
      },
      type: 'POST',
      dataType: 'html',
      error: errorHandler
    }).done( function( response ) {
      $container.find('.list').append( response );
    });
  });

});

Some notes

Please see your page source to be sure that the javascript url is inserted correctly, because if the file path js/my_ajax.js is relative to plugin root then you need to pass as second argument to plugins_url the path of a file in the plugin main directory, where I used __FILE__, but if your Events_Controller class is in a subdirectory the url used for js/my_ajax.js will be wrong.

Also, in your js you are using a simple $('.list').append( response ); but probably you should a more selective selector than $('.list') also because if the same shortcode is inserted more than once you need a way to recognize to which shortcode append the response.
I’ve used a reference to container, adapt my code to your needs.

On the countrary, you trigger the ajax call on '#show-more-button a' but probably you should use an html class instead of an html id because you can have more than one button. I’ve used a class using the container class to narrow possibilities of conflicts with other stuff in the page, again, adapt my code to your needs.

Related Posts:

  1. WordPress AJAX Pagination with query_posts
  2. Do I require the use of nonce?
  3. Security – Ajax and Nonce use [closed]
  4. PHP calling AJAX function that relies on passed PHP function values not working
  5. Looking for a better way to handle an ajax script that pulls in post data on click
  6. How to add default images into theme customizer image control?
  7. Can’t use get_results() in ajax query
  8. Debugging PHP object during Ajax call in WordPress
  9. WordPress Ajax Data problem
  10. Problem with WordPress Ajax form
  11. Access/update database with jQuery
  12. How to display something in a div when the user clicks on a text in another div – no page refresh [closed]
  13. Passing jQuery value using Ajax to a page template
  14. How to set a custom path, for ajax image upload folder in admin?
  15. admin-ajax.php responding with 0
  16. ajax_object is not defined when ajax calls the function
  17. Page Reloads Before AJAX Request Finishes
  18. Why is this Ajax not working?
  19. How to prevent those PHP variables from being cached on WordPress?
  20. Use ajax from function.php
  21. Ajax return code 400
  22. get post based on category chosen in drop down – The ajax method
  23. How to make drop down post title
  24. Create onClick Event to Re-load a Widget
  25. ajax, right way to do it and make it works?
  26. How to store data from multiple forms using ajax and php
  27. WordPress ajax doesn’t display object method on jQuery .change() function
  28. Ajax loaded form replaces form action with Ajax url
  29. Problem with custom plugin using AJAX to pull info from php file
  30. Gutenberg block – Save PHP function’s output as HTML?
  31. Call a PHP Function with Multiple Parameters that is outside the AJAX Handler
  32. Image upload via FormData API and AJAX is not working ($_FILES always empty)
  33. Ajax date_query not working past the first iteration
  34. Is it possible to intercept all ajax requests and get the parameters and the returns?
  35. WordPress, AJAX and pre_get_posts using conditional tags
  36. Refresh table data with Ajax
  37. Setting value of session with Ajax not working
  38. [jQuery]Adding shortcode
  39. Display parent and child taxonomies in separate drop down select fields
  40. WordPress admin-ajax.php 400 bad request
  41. Ajax contact form return 0
  42. Problem with AJAX in wordpress plugin
  43. How to keep track of when a vote is cast?
  44. set post limit at load more ajax wordpress
  45. AJAX wp_insert_user WORKS but responds with “The site is not enabled”
  46. Ajax filter button display all posts
  47. Compare $_POST returned values with term array
  48. WordPress REST API register_rest_route give a 500 error
  49. How to use AJAX to call php page with parameter
  50. admin-ajax GET response bad request
  51. javascript variable to wordpress php variable
  52. Post not populating for custom post type based on category selection
  53. Output votes to div dynamically in wordpress
  54. Incrementing PHP variable onclick to display posts by month
  55. Proper way to use WordPress function with AJAX PHP file
  56. How to use AJAX in WordPress in MYSQL query?
  57. Live search from database table
  58. Processing ajax call to php to insert into mysql database
  59. Ajax URLs without #!, how to prevent falling into single.php on load or reload?
  60. Why does PHP called with Jquery AJAX not allow additional php code to be added?
  61. Display WordPress search results based on the selected Sub-Category
  62. Deleting records with AJAX, deleting records as I search
  63. Using some Loop or repeatable fucntion in AJAX and PHP to reduce repeatability
  64. Database entry removed on browser refresh, Ajax PHP jQuery
  65. How do I call a value from the datase using ajax
  66. Post form – AJAX won’t upload featured image – Plugin development
  67. Load more posts using AJAX based on posts inside WP_Query
  68. PHP calling AJAX function that relies on passed PHP function values not working
  69. Where to add my PHP codes for AJAX Jquery to work?
  70. Adding ELSE argument to AJAX Live Search for “No results found”
  71. How can i find wrong word in search box and replace with correct word
  72. How to use wp_ajax_set_post_thumbnail?
  73. Can an AJAX callback function access a PHP variable which was defined during initial page load?
  74. Can’t make lazy load for my site, help!
  75. How to reload a php script, using AJAX and jQuery
  76. Change WooCommerce currency programmatically on AJAX request
  77. Top Authors list by highest post views with Ajax pagination
  78. Offset with ajax load more posts duplicates
  79. Custom theme admin-ajax.php 400 (Bad Request)
  80. number of posts with “Load More”
  81. How to send Ajax Call from frontend without using wp_localize_script in Theme
  82. wordpress more than one ajax request at the same time issue
  83. Include search tags and users in my search results system
  84. Ajax not updating to database
  85. Ajax Load more CPT via shortcode
  86. Apply filters when loading post via ajax
  87. MySQL query in WordPress with AJAX
  88. Registration form not registering First and Last name
  89. Result from wp_send_json adds line feed
  90. Is custom behaviour possible when asynchronously uploading?
  91. AJAX with Selectbox Plugins (Select2, Chosen, Selectize)
  92. Fatal error: Uncaught Error: Call to undefined function wp_nav_menu()
  93. Data inserted in database, but ajax calls error function
  94. Load Meta box value into div AJAX [duplicate]
  95. Detecting IP Address of someone using ‘copy’ function [closed]
  96. Correct way to perform a GET to another PHP file hosted on wordpress
  97. How to display inputted data in Ajax without button or click event
  98. AJAX returning blank result
  99. using AJAX [object Object]
  100. Ajax – how to use XMLHttpRequest in wordpress