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: