Asynchronous request in wordpress

Question

I have a slight problem when making a request via ajax in a wordpress plugin.

Here is the server side:

add_action('admin_enqueue_scripts', 'my_enque_post');

    function my_enque_post()
    {
        wp_register_script('PostList', RADIOWEB__PLUGIN_URL . "/js/postlist.js", array(
            'jquery'
        ));
        $title_nonce = wp_create_nonce('title_example');
        wp_localize_script('PostList', 'modallist', array(
            'ajaxurl' => admin_url('admin-ajax.php') ,
            'nonce' => $title_nonce
        ));
        wp_enqueue_script('PostList');
    }

    add_action('wp_ajax_nopriv_get-list-post', 'get_list_post');
    add_action('wp_ajax_ajax_obter-list-post', 'get_list_post');

    function get_list_post()
    {
        $teste = $_POST['teste'];
        echo $teste.'34' ;
        wp_die();
    }

As we can see this script points to the following:

jQuery(document).ready(function($) {
    function queryPostsTable() {
        jQuery.ajax({
            type: "POST",
            url: modallist.ajax_url,
            _ajax_nonce: modallist.nonce,
             action: 'get_list_post',
             teste: 'teste12',            
            success: function(response) {
               console.log(response);
            }
        });
    }

    $("#programa-search").change(function() {

        queryPostsTable();

    });


});

When I run the script the response variable returns me the entire html of the plugin's adm page.

but this is not what I expect to happen

My goal is to perform the function:  

get_list_post ();

Which captures the post-test variable and echoes it.

My goal is to do operations within this function: get_list_post ();

and return what is echoed. My expectation in executing this code is to return in console.log: teste1234 Can anyone please give me a hint on how to achieve this result?

Answer 1

Your AJAX URL varaible is different in your PHP and your JS. In your JS you refer to ajax_url:

url: modallist.ajax_url,

But the variable defined in PHP is ajaxurl:

'ajaxurl' => admin_url('admin-ajax.php') ,

This is why you're getting the full admin page as a response. Your request is going to the current page because there isn't a real URL.

Your other problem is that the action for your hooks is incorrect. Your hooks are:

add_action('wp_ajax_nopriv_get-list-post', 'get_list_post');
add_action('wp_ajax_ajax_obter-list-post', 'get_list_post');

First of all, they're different. They should be the same but one has no_priv. The second problem is that they don't match the action name in JS. In JS you've set the action to:

action: 'get_list_post',

So your hooks should be:

add_action('wp_ajax_nopriv_get_list_post', 'get_list_post');
add_action('wp_ajax_get_list_post', 'get_list_post');