AJAX form post returns 0

Question

I am working on a simple plugin that shows an HTML form where the user can input a keyword which is used to query an external API. I currently have the form and the related jQuery set up, but when passed to the plugin’s PHP file, I get a response of simply 0. At this point I’m only just trying to get any response but 0 (see the echo "Whyyyy" part). I’ve been scouring the internet and feel like I have tried everything that’s been suggested, leading me to think I’m making a mistake somewhere.

Any help would be greatly appreciated. 🙏

This is the plugin’s PHP:

defined('ABSPATH') or die('Ah ah ah. You didn't say the magic word.');

class News_search {

    // Load scripts upon class initiation
    public function __construct() {
        add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
        add_action('wp_ajax_get_news_callback', 'get_news_callback');
        add_action('wp_ajax_nopriv_get_news_callback', 'get_news_callback');
        add_shortcode('wp_news_search', array($this, 'wp_news_search_form'));
    }

    function enqueue_scripts() {
        // Enqueue CSS
        wp_enqueue_style('wp-news-search', plugins_url('/css/wp-news-search.css', __FILE__));
        // Enqueue and localize JS
        wp_enqueue_script('ajax-script', plugins_url('/js/wp-news-search_query.js', __FILE__), array('jquery'), null, true);
        wp_localize_script('ajax-script', 'ajax_object',
            array('ajax_url' => admin_url('admin-ajax.php'),
                'security' => wp_create_nonce('my-string-shh'),
            ));
    }

    // Handle AJAX request
    function get_news_callback() {
        check_ajax_referer('my-special-string', 'security');
        $keyword = isset($_POST['news-keyword']) ? $_POST['news-keyword'] : null;
        echo "Whyyyy";
        die();

    }

    public function wp_news_search_form() {
        $content .= '<form id="wp-news-search__form">
                        <label>
                            <input type="text" name="news-keyword" placeholder="' . __('Enter keywords') . '" id="news-keyword" required>
                        </label>
                        <button id="wp-news-search__submit">' .
                         __('Search for news', 'wp-news-search') .
                       '</button>
                    </form>';
        return $content;
    }

}

new News_search();

And this is the JS file:

(function ($) {

    $(document).ready(function () {
        $('#wp-news-search__form').submit(function (event) {
            event.preventDefault();

            // const keyword = $('#query-input').val();
            const values = $(this).serialize();


            if (values) {
                // send stuff to php
                console.log(values);
                const data = {
                    action: 'get_news_callback',
                    status: 'enabled',
                    security: ajax_object.security,
                    form_data: values
                }

                $.post(ajax_object.ajax_url, data, function(response) {
                    if (response) {
                        console.log(`Response is: ${response}`);
                    }
                })
                    .fail(() => { console.error('error'); })
                    .always(() => { console.log('form submitted') });
            }

        });


    });

})(jQuery);
0
whatifthis 4 months 2020-12-30T00:10:21-05:00 0 Answers 3 views 0

Leave an answer

Browse
Browse