ajax-action.php can't find added action

Question

Dear fellow Wordpress plugin developers,

I'm currently developing a WordPress custom booking plugin. In this plugin, I have added a calendar shortcode, which embeds an Html month calendar on the page. I also added some Jquery which should get the calendar of the previous or next month when the user clicks on the corresponding button. The jquery sends a post-request to admin-ajax.php, which should trigger an added ajax action. The problem only is that admin-ajax.php returns a 400, which means it can't find the action. I know the constructor of the Wp_Lbs_Calendar is triggered (which means the action has to be added), because the show function successfully returns a calendar to the page.

So I hope you guys can help me further.

My code:

Calendar class:

class Wp_Lbs_Calendar {  

/**
 * The ID of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $plugin_name    The ID of this plugin.
 */
private $plugin_name;

/**
 * The version of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $version    The current version of this plugin.
 */
private $version;


/**
 * Constructor
 */
public function __construct( $plugin_name, $version ) {
    $this->plugin_name = $plugin_name;
    $this->version = $version;  

    $this->naviHref = htmlentities($_SERVER['PHP_SELF']);

    add_action('wp_ajax_nopriv_get_next_calendar_ajax_action', array(get_called_class(), 'get_next_calendar_ajax_action') );
    add_action('wp_ajax_get_next_calendar_ajax_action', array(get_called_class(), 'get_next_calendar_ajax_action') );

    wp_enqueue_style( $this->plugin_name.'_calendar');
    wp_enqueue_script( $this->plugin_name.'_calendar');
    wp_localize_script( $this->plugin_name.'_calendar', 'my_ajaxurl', admin_url( 'admin-ajax.php' ) );
}

private function _createScript(){
    $nextMonth = $this->currentMonth==12?1:intval($this->currentMonth)+1;

    $nextYear = $this->currentMonth==12?intval($this->currentYear)+1:$this->currentYear;

    $preMonth = $this->currentMonth==1?12:intval($this->currentMonth)-1;

    $preYear = $this->currentMonth==1?intval($this->currentYear)-1:$this->currentYear;

    return '<script>function prev(){getNextCalendar(\''.$this->version.'\','.$preMonth.','.$preYear.');}
    function next(){getNextCalendar(\''.$this->version.'\','.$nextMonth.','.$nextYear.');}</script>';
}

...

public function show(){
    ...
}

public static function get_next_calendar_ajax_action(){
    if(isset($_POST['plugin_name']) && isset($_POST['version'])  && isset($_POST['year']) && isset($_POST['month']) ){           
        $plugin_name = htmlentities($_POST['plugin_name']);
        $version = htmlentities($_POST['version']);
        $year = htmlentities($_POST['year']);
        $month = htmlentities($_POST['month']);

        $Calendar = new Wp_Lbs_Calendar($plugin_name, $version);
        echo $Calendar->ShowByDate($month, $year);
    }
    wp_die();
}
}

My shortcode class:

class Wp_Lbs_Shortcodes {

    /**
     * The ID of this plugin.
     *
     * @since    1.0.0
     * @access   private
     * @var      string    $plugin_name    The ID of this plugin.
     */
    private $plugin_name;

    /**
     * The version of this plugin.
     *
     * @since    1.0.0
     * @access   private
     * @var      string    $version    The current version of this plugin.
     */
    private $version;

    /**
     * Initialize the class and set its properties.
     *
     * @since    1.0.0
     * @param      string    $plugin_name       The name of the plugin.
     * @param      string    $version    The version of this plugin.
     */
    public function __construct( $plugin_name, $version ) {

        $this->plugin_name = $plugin_name;
        $this->version = $version;

    }

    public function calendar($atts = [], $content = null){
        include_once('partials/wp-lbs-calendar.php');
        $Calendar = new Wp_Lbs_Calendar($this->plugin_name, $this->version);
        return $Calendar->show();
    }
}

The style is loaded in an other file as follows:

public function enqueue_scripts() {

    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-lbs-public.js', array( 'jquery' ), $this->version, false );
    wp_register_script( $this->plugin_name.'_calendar', plugin_dir_url( __FILE__ ) . 'js/wp-lbs-get-calendar.js', array( 'jquery' ), $this->version, false );

}

The javascript file:

function getNextCalendar(plugin_version, year, month){
    jQuery.ajax({
        url: my_ajaxurl,
        type: "POST",
        data:{
            action: 'get_next_calendar_ajax_action',
            plugin_name: 'wp_lbs',
            version: plugin_version,
            year: year,
            month: month
        },
        success: function(result){
            $('#calendar').parent().html(result);
        }
    });
}

Answer 1

You can't hook an AJAX action from within a shortcode, and the constructor for Wp_Lbs_Calendar is only running inside your shortcode.

This means that the actions are only hooked to wp_ajax_ when your shortcode is used on the page. But the AJAX request is a separate request to admin-ajax.php, and your shortcode is not running on on that page, so the actions are not hooked and will not run.

Your add_action()s for AJAX need to be hooked in a place that lets them run on every page load, so that the handler is available on admin-ajax.php.