Question 1912 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress JQuery get custom post type data not working

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.

Tags:

3

Answers


  1. 0

    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!');
}
    Login or Signup to reply.
  2. 0

    Modify your add_action code with the following.

    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' );
    Login or Signup to reply.
  3. 0

    You made an error in your jquery code here. You simply need to change the ajax code action from this:
    'action': 'webdev_fetch_apple_post_data'

    To this:
    'action': 'webdev_fetch_laptop_post_data'

    Then it will work. Try above code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search