Wordpress JQuery get custom post type data not working

Question

I have a custom post type where some posts contains laptop model data, I have loaded every post title and id in a select on the front end, on the change I want to retrieve the custom post type data. Here is the wordpress hook function:

function webdev_fetch_laptop_post_data() {
    $post_id = intval($_GET['post_id']);
    $post_type = sanitize_text_field($_GET['post_type']);

    
    $thispost = get_post( $post_id, $post_type );

    if ( !is_object( $thispost ) ) {
        echo 'There is no post with the ID '. $post_id;
        die();
    }

    echo $thispost->post_content;

    die();
}

add_action( 'wp_ajax_webdev_fetch_laptop_post_data', 'webdev_fetch_laptop_post_data' );

add_action( 'wp_ajax_nopriv_webdev_fetch_laptop_post_data', 'webdev_fetch_laptop_post_data' );

Here the jquery function to get data:

jQuery(document).ready(function($) {
$("#webdev-laptop-prices-select").on("change",function () {
    var post_id = $(this).attr('post_id');
    $.ajax({
        type: 'GET',
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        data: {
            'post_id': post_id,
            'post_type': 'laptop_price_serv', 
            'action': 'webdev_fetch_apple_post_data' 
        }, success: function (result) {
           alert(result);
        },
        error: function () {
            alert("error");
        }
    });
});

});

when I select an option on the front end, it returns the following 400 error:

jquery.min.js?ver=3.6.1:2          GET https://example.com/wp-admin/admin-ajax.php?post_type=laptop_price_serv&action=webdev_fetch_laptop_post_data 400

I tried the above code it's not working, returning a 400 error, I want to retrieve the custom post type post data.

Answer 1

Here you need to keep the action same for everywhere.

add_action('wp_ajax_webdev_fetch_apple_post_data', 'webdev_fetch_laptop_post_data'); add_action('wp_ajax_nopriv_webdev_fetch_apple_post_data', 'webdev_fetch_laptop_post_data');

See below full code snippet added.

PHP Code Here

function webdev_fetch_laptop_post_data()
{
    $post_id = intval($_GET['post_id']);
    $post_type = sanitize_text_field($_GET['post_type']);
    $thispost = get_post($post_id, $post_type);

    if (!is_object($thispost)) {
        echo 'There is no post with the ID ' . $post_id;
        die();
    }
    echo $thispost->post_content;
    die();
}
add_action('wp_ajax_webdev_fetch_apple_post_data', 'webdev_fetch_laptop_post_data');
add_action('wp_ajax_nopriv_webdev_fetch_apple_post_data', 'webdev_fetch_laptop_post_data');

jQuery Code Here

jQuery(document).ready(function($) {
    $("#webdev-laptop-prices-select").on("change", function() {
        var post_id = $(this).attr('post_id');
        $.ajax({
            type: 'GET',
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            data: {
                'post_id': post_id,
                'post_type': 'laptop_price_serv',
                'action': 'webdev_fetch_apple_post_data'
            },
            success: function(result) {
                alert(result);
            },
            error: function() {
                alert("error");
            }
        });
    });
});

Also it's better to use the some security measures while calling the WP-AJAX

What is nonce?

Nonce is something like security hash to prevent attacks and mistakes. It creates unique identifiers to check if the ajax request is coming from website or not. In WordPress words

A nonce is a "number used once" to help protect URLs and forms from certain types of misuse, malicious or otherwise. WordPress nonces aren't numbers, but are a hash made up of numbers and letters. Nor are they used only once, but have a limited "lifetime" after which they expire.

Create nonce

'nonce' => wp_create_nonce('ajax-nonce')

Check nonce while calling request

if ( ! wp_verify_nonce( $_POST['nonce'], 'ajax-nonce' ) ) {
    die ( 'Busted!');
}