# Ajax request from frontend of custom module

**URL:** <https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737>\
**Category:** Developers\
**Tags:** beaver-themer, beaver-builder\
**Created:** [September 10, 2019, 7:30am UTC](https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737 "2019-09-10T07:30:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigunit](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/a9a28c/32.png) [@bigunit](https://community.wpbeaverbuilder.com/u/bigunit)\
**Post date:** [September 10, 2019, 7:30am UTC](https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737/1 "2019-09-10T07:30:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bigunit](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/a9a28c/32.png) [@bigunit](https://community.wpbeaverbuilder.com/u/bigunit)\
**Post date:** [September 16, 2019, 7:28pm UTC](https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737/2 "2019-09-16T19:28:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [September 17, 2019, 10:37pm UTC](https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737/3 "2019-09-17T22:37:39Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![bigunit](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/a9a28c/32.png) [@bigunit](https://community.wpbeaverbuilder.com/u/bigunit)\
**Post date:** [September 18, 2019, 6:05am UTC](https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737/4 "2019-09-18T06:05:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bigunit](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/a9a28c/32.png) [@bigunit](https://community.wpbeaverbuilder.com/u/bigunit)\
**Post date:** [October 4, 2019, 11:40am UTC](https://community.wpbeaverbuilder.com/t/ajax-request-from-frontend-of-custom-module/9737/5 "2019-10-04T11:40:16Z")

</div>

Any advice on this? I really do need ajax…