JQuery Ajax bad request on wordpress theme - ajax

Question

I created a custom widget to display a calendar and the code for the calendar can be found here.
From my theme root directory, the folder structure looks like this:
inc/most-recent-widget.php
All the calendar code has been added in the widget class:
class __themename_Most_recent_widget extends WP_Widget{
private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");
private $currentDay = 0;
private $currentMonth = 0;
private $currentYear = 0;
private $currentMonthStart = null;
private $currentMonthDaysLength = null;
function __construct() {
parent::__construct(
'_themename_most_recent_widget',
esc_html__('Recent Posts', '_themename'),
['description' => esc_html__('some description', '_themename')]
);
$this->currentYear = date ( "Y", time () );
$this->currentMonth = date ( "m", time () );
if (! empty ( $_POST ['year'] )) {
$this->currentYear = $_POST ['year'];
}
if (! empty ( $_POST ['month'] )) {
$this->currentMonth = $_POST ['month'];
}
$this->currentMonthStart = $this->currentYear . '-' . $this->currentMonth . '-01';
$this->currentMonthDaysLength = date ( 't', strtotime ( $this->currentMonthStart ) );
}
function getCalendarHTML() {
$calendarHTML = '<div id="calendar-outer">';
$calendarHTML .= '<div class="calendar-nav">' . $this->getCalendarNavigation() . '</div>';
$calendarHTML .= '<ul class="week-name-title">' . $this->getWeekDayName () . '</ul>';
$calendarHTML .= '<ul class="week-day-cell">' . $this->getWeekDays () . '</ul>';
$calendarHTML .= '</div>';
return $calendarHTML;
}
function getCalendarNavigation() {
$prevMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart. ' -1 Month' ) );
$prevMonthYearArray = explode(",",$prevMonthYear);
$nextMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart . ' +1 Month' ) );
$nextMonthYearArray = explode(",",$nextMonthYear);
$navigationHTML = '<div class="prev" data-prev-month="' . $prevMonthYearArray[0] . '" data-prev-year = "' . $prevMonthYearArray[1]. '"><</div>';
$navigationHTML .= '<span id="currentMonth">' . date ( 'M ', strtotime ( $this->currentMonthStart ) ) . '</span>';
$navigationHTML .= '<span contenteditable="true" id="currentYear">'. date ( 'Y', strtotime ( $this->currentMonthStart ) ) . '</span>';
$navigationHTML .= '<div class="next" data-next-month="' . $nextMonthYearArray[0] . '" data-next-year = "' . $nextMonthYearArray[1]. '">></div>';
return $navigationHTML;
}
function getWeekDayName() {
$WeekDayName= '';
foreach ( $this->weekDayName as $dayname ) {
$WeekDayName.= '<li>' . $dayname . '</li>';
}
return $WeekDayName;
}
function getWeekDays() {
$weekLength = $this->getWeekLengthByMonth ();
$firstDayOfTheWeek = date ( 'N', strtotime ( $this->currentMonthStart ) );
$weekDays = "";
for($i = 0; $i < $weekLength; $i ++) {
for($j = 1; $j <= 7; $j ++) {
$cellIndex = $i * 7 + $j;
$cellValue = null;
if ($cellIndex == $firstDayOfTheWeek) {
$this->currentDay = 1;
}
if (! empty ( $this->currentDay ) && $this->currentDay <= $this->currentMonthDaysLength) {
$cellValue = $this->currentDay;
$this->currentDay ++;
}
$weekDays .= '<li>' . $cellValue . '</li>';
}
}
return $weekDays;
}
function getWeekLengthByMonth() {
$weekLength = intval ( $this->currentMonthDaysLength / 7 );
if($this->currentMonthDaysLength % 7 > 0) {
$weekLength++;
}
$monthStartDay= date ( 'N', strtotime ( $this->currentMonthStart) );
$monthEndingDay= date ( 'N', strtotime ( $this->currentYear . '-' . $this->currentMonth . '-' . $this->currentMonthDaysLength) );
if ($monthEndingDay < $monthStartDay) {
$weekLength++;
}
return $weekLength;
}
public function widget($args, $instance){
echo $this->getCalendarHTML();
}
}
function __themename_register_most_recent_widget(){
register_widget('__themename_Most_recent_widget');
}
add_action('widgets_init', '__themename_register_most_recent_widget');
Inside the above class, my widget method, which is what calls the calendar looks like this:
public function widget($args, $instance){
echo $this->getCalendarHTML();
}
Until here the calendar shows up with its styling.
How can I get the Javascript and Ajax code to run?
I created a js file named customize-controls.js:
(function( $ ) {
$(document).ready(function(){
$(document).on("click", '.prev', function(event) {
var month = $(this).data("prev-month");
var year = $(this).data("prev-year");
getCalendar(month,year);
});
$(document).on("click", '.next', function(event) {
var month = $(this).data("next-month");
var year = $(this).data("next-year");
getCalendar(month,year);
});
$(document).on("blur", '#currentYear', function(event) {
var month = $('#currentMonth').text();
var year = $('#currentYear').text();
getCalendar(month,year);
});
});
function getCalendar(month,year){
var url = "/testtheme/wp-admin/admin-ajax.php";
$.ajax({
url: url,
action : 'calendar_events',
type: "POST",
data:'month='+month+'&year='+year,
success: function(response){
$("#calendar-html-output").html(response);
},
error: function(){}
});
}
})( jQuery );
When I view the calendar and try to click on one of the controls I see the following in my console:
VM3244:1 POST http://localhost/testtheme/wp-admin/admin-ajax.php 400 (Bad Request)
EDIT:
My functions.php looks like the following:
function twentynineteen_scripts() {
wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
wp_enqueue_script( 'twentynineteen-customControl', get_theme_file_uri( '/js/customize-controls.js' ), array('jquery'), '1.1', true );
wp_localize_script( 'customize-controls-script', 'php_obj',
array(
'ajaxUrl' => admin_url( 'admin-ajax.php' )
)
);
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
add_action( 'wp_ajax_calendar_events', 'calendar_events_callback' );
add_action( 'wp_ajax_nopriv_calendar_events', 'calendar_events_callback' );
function calendar_events_callback() {
exit();
}
How can I get the javascript side working?

Answer 1

There are a few issues with your code.
You never set the admin-ajax.php URL like that. You have to use script localization:
in your case, where you have the wp_register_script() or wp_enqueue_script() function you also have to use wp_localize_script().
PHP File
Not sure what is your script handle but I will put down an example:
wp_enqueue_script('customize-controls-script', get_stylesheet_directory_uri() . 'customize-controls.js');
wp_localize_script( 'customize-controls-script', 'php_obj',
array(
'ajaxUrl' => admin_url( 'admin-ajax.php' )
)
);
JS File
And then in your JS file you use that php_obj variable we just sent using wp_localize_script():
function getCalendar(month,year){
var url = php_obj.ajaxUrl;
$.post({
url,
data:{
action: 'calendar_events',
month: month,
year: year
},
success: function(response){
$("#calendar-html-output").html(response);
},
error: function(){}
});
}
You need to add the WP actions to handle the ajax request. You can learn more here
WordPress is usually returning the 400 response when the ajax actions are not set correctly in PHP.
As an example. I will put down a quick sample:
add_action( 'wp_ajax_calendar_events', 'calendar_events_callback' );
add_action( 'wp_ajax_nopriv_calendar_events', 'calendar_events_callback' );
function calendar_events_callback() {
// logic for the output
// here you output the html you need to the calendar
// make sure you exit so the output stops when the request is done
exit();
}
Let me know if that is clear or if you need more help with it.
Here is another good reference regarding the use of AJAX in WP
EDIT
After the code you added make sure the handle of the wp_enqueue_script() is the same as the wp_localize_script() one:
function twentynineteen_scripts() {
wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
wp_enqueue_script( 'twentynineteen-customControl', get_theme_file_uri( '/js/customize-controls.js' ), array('jquery'), '1.1', true );
wp_localize_script( 'twentynineteen-customControl', 'php_obj',
array(
'ajaxUrl' => admin_url( 'admin-ajax.php' )
)
);
}
EDIT 2
Given the fact that WP does not allow you to instantiate the widget by doing $calendar_widget = new __themename_Most_recent_widget();, means that you have to move the PHPCalendar methods in another class that you then instantiate in both the widget and the AJAX call.
That means:
CalendarWidget class
class CalendarWidget{
private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");
private $currentDay = 0;
private $currentMonth = 0;
private $currentYear = 0;
private $currentMonthStart = null;
private $currentMonthDaysLength = null;
function __construct() {
//method here
}
function getCalendarHTML() {
//method here
}
function getCalendarNavigation() {
//method here
}
function getWeekDayName() {
//method here
}
function getWeekDays() {
//method here
}
function getWeekLengthByMonth() {
//method here
}
}
Widget Class File
class __themename_Most_recent_widget extends WP_Widget{
function __construct() {
parent::__construct(
'_themename_most_recent_widget',
esc_html__('Recent Posts', '_themename'),
['description' => esc_html__('some description', '_themename')]
);
}
public function widget($args, $instance){
$phpCalendar = new CalendarWidget();
$calendarHTML = $phpCalendar->getCalendarHTML();
echo $calendarHTML;
}
}
function __themename_register_most_recent_widget(){
register_widget('__themename_Most_recent_widget');
}
add_action('widgets_init', '__themename_register_most_recent_widget');
Functions.php
function twentynineteen_scripts() {
wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
wp_enqueue_script( 'twentynineteen-customControl', get_theme_file_uri( '/js/customize-controls.js' ), array('jquery'), '1.1', true );
wp_localize_script( 'twentynineteen-customControl', 'php_obj',
array(
'ajaxUrl' => admin_url( 'admin-ajax.php' )
)
);
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
add_action( 'wp_ajax_calendar_events', 'calendar_events_callback' );
add_action( 'wp_ajax_nopriv_calendar_events', 'calendar_events_callback' );
function calendar_events_callback() {
$phpCalendar = new CalendarWidget();
$calendarHTML = $phpCalendar->getCalendarHTML();
echo $calendarHTML;
exit();
}
This should do it :)