CODEWITHSUNDEEP
jqueryajaxwordpress
1way
1way

Reputation: 60

ajax action after ajax loaded response in wordpress

i use ajax in wordpress to display content of a post by clicking in a list of posts.

my ajax :

(function($) {
$(document).ready(function() {

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

        var post_id = jQuery(this).attr('id');

        //console.log('cliqué : '+post_id);

        jQuery.ajax({
            url : display_post.ajax_url,
            type : 'post',
            data : {
                action : 'display_post',
                post_id : post_id
            },
            success : function( response ) {
                //alert(response)
                $('.fullnews').html( response );
                var thumbH = $('.fullnews .left').height();
                $('.fullnews .right').css('height',thumbH+'px');
                //console.log(thumbH);

            }
        });

    });

});

})( jQuery );

my function :

add_action( 'wp_ajax_nopriv_display_post', 'display_post' );
add_action( 'wp_ajax_display_post', 'display_post' );

function display_post() {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
    $post_id = $_POST['post_id'];

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'post__in' => array($post_id)
    );
    $query = new WP_Query( $args );
    if ( $query->have_posts() ):
        while ( $query->have_posts() ):
            $query->the_post();

            $next_post = get_next_post();
            $prev_post = get_previous_post();

            echo '<a id="'.$next_post->ID.'" href="#" class="ajax_post_content arrow-left"></a>';
            echo '<a id="'.$prev_post->ID.'" href="#" class="ajax_post_content arrow-right"></a>';
            echo '<div class="col-md-1"></div>';
            echo '<div class="col-md-5 left">';
                echo '<span class="title">'.get_the_title(get_the_ID()).'</span>';
                echo '<div class="content">'.get_the_content(get_the_ID()).'</div>';
            echo '</div>';
            echo '<div class="col-md-5 right" style="background: url('.get_the_post_thumbnail_url().') center center / cover;"></div>';
            echo '<div class="col-md-1"></div>';
            echo '<div class="clear"></div>';

        endwhile;
    endif;
}
die();
}

and how i declare ajax in wordpress :

 wp_register_script( 'ajax', get_template_directory_uri().'/js/ajax.js', 'jquery', time(), true );
    //wp_register_script( 'ajax', get_template_directory_uri().'/js/ajax.js', 'jquery', '', true );
    wp_enqueue_script( 'ajax' );
    wp_localize_script( 'ajax', 'display_post', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));

my problem is : when the content is displaying with ajax, i want to add next / prev button to change displaying content but i got no action, no response, the click doesn't work like if it was no jquery

sorry for my english, i'm french.

Upvotes: 0

Views: 1592

Answers (1)

ADyson
ADyson

Reputation: 62074

This issue isn't really specific to Wordpress. The problem is that the buttons created in your PHP function are not on the page when you declare the "click" event handler for elements with the class .ajax_post_content. They only exist after you make the ajax call. Therefore the event does not get bound to these new elements, because the code which declared the event ran some time ago when the elements did not exist.

What you need to use is delegated events. You attach the event to some element further up the DOM hierarchy which you know will definitely exist when the event handler code runs (i.e. at page load in your case). It can then handle events for any descendent elements which match the selector you give it, regardless of whether those descendant elements exist at that moment or not.

The syntax is like this:

$("#SomeStaticElement").on("click", ".ajax_post_content", function() {

#SomeStaticElement can be any valid jQuery selector, including document, as long as it is higher up the DOM hierarchy than the dynamically generated elements you want to attach the event to.

See the jQuery docs here for more discussion and examples of delegated events: http://api.jquery.com/on/

Upvotes: 1

Related Questions