web-dev-qa-db-fra.com

WordPress ajax obtenir le contenu post id

J'essaie de télécharger l'article après son identifiant.

Debuger:

Renvoie la source: action = my_load_ajax_content + & postid = 147

action: my_load_ajax_content postid: 147

Le contenu reste le même malgré le changement de postid. Je fais quelque chose de mal, aide s'il vous plaît.

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' );

Bouton: 

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

Je vous remercie.

ajaxget-posts
1
Adamko

Il y a beaucoup d'erreurs et de mauvaises pratiques dans votre code. J'ai réparé la plupart d'entre eux. Expliquer tout cela n'est pas possible. J'ai écrit l'explication sous forme de commentaire là où ils en ont besoin. S'il vous plaît lire le code entier et commentaires attentivement -

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' );

Ce code est testé. Je l'ai testé moi-même et cela a fonctionné pour moi.

4
CodeMascot