WordPress ajax get content post id

Question

I am attempting to download the post after his id.

Debuger:

Returns source: action = my_load_ajax_content + & postid = 147

action: my_load_ajax_content postid: 147

It gets still the same content despite changing postid. I'm doing something wrong, please help.

Code:

custom.js

jQuery(function($){

    $('.get_project').click(function() {

        var postid = $(this).attr('data-postid');

        $.post(my_ajax_object.ajaxurl, {
            action: 'my_load_ajax_content ',            
            postid: postid
        }, function(data) {
            var $response   =   $(data);
            var postdata    =   $response.filter('#postdata').html();
            $('.TARGETDIV').html(postdata);
        });

    })


});

functions.php

function my_load_ajax_content () {
    $the_query  = new WP_Query(array('p' => $pid));

     if ($the_query->have_posts()) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $data = '
            <div class="post-container">
                <div id="project-content">
                    <h1 class="entry-title">'.get_the_title().'</h1>
                    <div class="entry-content">'.get_the_content().'</div>
                </div>
            </div>  
            ';
        }
    } 
    else {
        echo '<div id="postdata">'.__('Didnt find anything', THEME_NAME).'</div>';
    }
    wp_reset_postdata();

    echo '<div id="postdata">'.$data.'</div>';
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

function my_enqueue() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/custom.js', array('jquery') );
    wp_localize_script( 'ajax-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Button:

<button class="get_project" data-postid="147">Get project</button>

Thank You.

Answer 1

There are many errors and bad practices in your code. I've fixed most of them. Explaining all those here is not possible. I've written the explanation as comment where they need to. Please read the whole code and comments attentively-

custom.js

// Wrap any jQuery code like this. It makes '$' use fullproof
// and prevent also some other error.
(function($){
    // And always use 'use strict' to make your JavaScript code mode strict.
    'use strict';
    // Wrap it with after the DOM is ready block.
    $(function (e) {
        // Try not to use click() method directly.
        // Rather try to delegate the event with on() method.
        $('.get_project').on( 'click', function(e) {
            e.preventDefault();
            var postid = $(this).attr('data-postid');
            console.log(postid);
            // I don't know why the shorthand method had not worked for me as well
            // But this method has worked for me.
            $.ajax({
                type: "POST",
                url: my_ajax_object.ajax_url,
                data: {
                    action: 'my_load_ajax_content',
                    postid: postid,
                }
            }).done(function (data) {
                // Just simple html() method with data will show all the content.
                $('.TARGETDIV').html(data);
            });
        });
    });
})(jQuery);

functions.php

function my_load_ajax_content () {
    // You need to grab the data from $_POST variable
    // And must sanitize the data.
    $pid = intval($_POST['postid']);
    $the_query  = new WP_Query(array('p' => $pid));

    if ($the_query->have_posts()) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $data = '
            <div class="post-container">
                <div id="project-content">
                    <h1 class="entry-title">' . get_the_title() . '</h1>
                    <div class="entry-content">' . get_the_content() . '</div>
                </div>
            </div>  
            ';
        }
    }
    else {
        // Since you're declared the $data variable before then assign the next value also in $data
        // And at the end just echo it.
        $data = '<div id="postdata">'.__('Didnt find anything', THEME_NAME).'</div>';
    }
    wp_reset_postdata();

    echo '<div id="postdata">'. $data .'</div>';
    // And must die() the function
    die();
}
// The actual hook is wp_ajax_noprive_{$action} and wp_ajax_{$action}
// You action is my_load_ajax_content in JS. So your hook will be
add_action ( 'wp_ajax_nopriv_my_load_ajax_content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_my_load_ajax_content', 'my_load_ajax_content' );

function my_enqueue() {
    // First register script
    wp_register_script( 'ajax-script', get_template_directory_uri() . '/js/custom.js', array('jquery') );
    // Localize script
    wp_localize_script( 'ajax-script', 'my_ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) )
    );
    // Then enqueue script
    wp_enqueue_script( 'ajax-script' );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue' );

This code is tested. I tested it myself and it worked for me.