Ajax request from frontend of custom module

I’m building a custom calendar module. I’m able to render the calendar, I just need to populate it with posts, via Ajax. In my main module.php file I have:

<?php
/**
 * Plugin Name: Custom SRS Modules
 */
define( 'RW_SRS_MODULE_DIR', plugin_dir_path( __FILE__ ) );
define( 'RW_SRS_MODULE_URL', plugins_url( '/', __FILE__ ) );

wp_enqueue_script( 'axios', 'https://unpkg.com/axios/dist/axios.min.js');
wp_enqueue_script( 'qs', 'https://unpkg.com/qs/dist/qs.js');

function get_ajax_conference_posts() {
// Query Arguments
$args = array(
    'post_type' => array('conference'),
    'post_status' => array('publish'),
    'posts_per_page' => 40,
    'nopaging' => true,
    'order' => 'DESC',
    'orderby' => 'date',
    'cat' => 1,
);
// The Query
$ajaxposts = new get_posts( $args ); // changed to get_posts from wp_query, because `get_posts` returns an array
echo json_encode( $ajaxposts );
	wp_die(); // exit ajax call(or it will return useless information to the response)
}


// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_ajax_confefence_posts', 'get_ajax_conference_posts');
add_action('wp_ajax_nopriv_get_ajax_conference_posts', 'get_ajax_conference_posts');

function rw_load_srs_modules() {
if ( class_exists( 'FLBuilder' ) ) {
   require_once 'rw-srs-calendar/rw-srs-calendar.php';
}
}
add_action( 'init', 'rw_load_srs_modules' );

And, within my w-srs-calendar/includes/frontend.js.php file I have:

(function() {
  document.addEventListener("DOMContentLoaded", function() {
    var calendarEl = document.getElementById("calendar-<?php echo $id; ?>");

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ["dayGrid"],
      events: function(start, end, callback) {
        // https://stackoverflow.com/questions/6788761/how-to-call-events-on-clicking-prev-and-next-button

        console.log(start, end, callback);

        var data = { action: "get_ajax_conference_posts" };

        axios
          .post("<?php echo admin_url('admin-ajax.php');?>", Qs.stringify(data))
          .then(function(response) {
            console.log(response.data);
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      eventClick: function(info) {
        alert("Event: " + info.event.title);
        // change the border color just for fun
        info.el.style.borderColor = "red";
      }
    });

    calendar.render();
  });
})();

My problem is, my ajax request 400s… Unfortunately, I don’t have access to the server logs for more detailed information on the error. Is there anything obvious that I’m doing wrong?

Thanks

Is anyone able to advise on how best to do this?

Hi,

I spoke to one of our developers and they said there shouldn’t be any need for AJAX. Instead, your frontend.php file should be fetching in the posts. :slight_smile:

Without Ajax, how will I asynchronously populate the calendar when a user selects a new month, day or year?

The page loads, displaying the current month - I can pre-populate that… but I need Ajax to update it. It is a pattern I have used before - placing the the methods called by my client side ajax function within functions.php (I’m a novice with wordpress and PHP. I’m a Node and Elixir developer for the day job).

Rather than place the methods inside functions.php - I wanted to include them within the custom Beaver Builder plugin so that they are protected against updates.

Any advice on this? I really do need ajax…