How to get next and previous post into ajax formed modal windows?

On the archive page, by clicking on a news item, I need to implement the appearance of news in a modal window. Well, there is nothing difficult here if you use ajax.

Here is my js code:

const newsItem = document.querySelectorAll('.news-item');
if(newsItem !== null){
    
    newsItem.forEach(item = {
        item.addEventListener('click', function(){
            let dataAttribute = item.getAttribute('data-new-id');
            $.ajax({
                type : 'POST',
                url : wp_helper.ajax_url,
                data : {
                    postid : dataAttribute,
                    action : 'loadmodal',
                },
                success : function( data ){
                    
                    $('#exampleModal .modal-body').html(data);
                    lazyLoad();
                }
            });
        });
    }); 
}

$('.btn-close').on('click', function(){
    $('#modal-content').empty();    
})

And here is a part of the php function

add_action( 'wp_ajax_loadmodal', 'really_loadmodal' );
add_action( 'wp_ajax_nopriv_loadmodal', 'really_loadmodal' );

function really_loadmodal() {

    $postid = $_POST[ 'postid' ];
    $post   = get_post($postid );
    setup_postdata( $post );
    
    if (have_rows('news_content',$postid)) {
        echo $post-ID;
        echo 'div class=modal-header
                div class=navigation-arrows
                    div class=nav-arrow left/div
                    div class=nav-arrow right/div
                /div
                button type=button class=btn-close data-bs-dismiss=modal aria-label=Close/button
           /div';
           
        echo'div class=news-single';
            while (have_rows('news_content',$postid)) : the_row();
                if (get_row_layout() == 'section_title'){
                    
                /// Post data here
                
                }
                
            endwhile;
        echo'/div';
    }
   wp_reset_postdata();
   wp_die();
}

Here you see these lines:

div class=modal-header
div class=navigation-arrows
    div class=nav-arrow left/div
    div class=nav-arrow right/div
/div
button type=button class=btn-close data-bs-dismiss=modal aria-label=Close/button
/div

They imply a jump to the previous and next post. And if I could get the IDs of these posts for the currently displayed in the modal window, I would easily implement this functionality using ajax. But I broke my head and spent a lot of time and not the solution. Guys, please help or in this case it will not be possible to implement this functionality?

Topic next-post-link ajax Wordpress

Category Web

1
answered at

I solved this issue thanks to Tom J Nowell He gave me the right idea in his comment. Everything is really ease (but I didn’t think of it myself) in order to get the identifiers of the previous and next post, it is enough to include them into ajax request. This is how it looks:

<?php
   $post = get_post($post_id);
   $previous_post = get_previous_post();
   $next_post = get_next_post();
?>
<div data-next-id="<?php echo $next_post->ID; ?>" data-prev-id="<?php echo $previous_post->ID; ?>" data-new-id="<?php echo get_the_ID(); ?>" class="news-item">

In the post card, two attributes are created in which the ID of the previous and next post are passed.

Now slightly modified js code:

if(prevPost !== null){
    prevPost.addEventListener('click', function(){
        let prevAttribute = this.getAttribute('data-prev-id');
        $.ajax({
            type : 'POST',
            url : wp_helper.ajax_url,
            data : {
                postid : prevAttribute,
                action : 'loadprevpost',
            },
            success : function( data ){
                
                $('#exampleModal .modal-body').html(data);
                lazyLoad();
            }
        });
    })
}

And php function:

add_action( 'wp_ajax_loadprevpost', 'really_loadprevpost' );
add_action( 'wp_ajax_nopriv_loadprevpost', 'really_loadprevpost' );

function really_loadprevpost() {

$postid = $_POST[ 'postid' ];
$post   = get_post($postid );
setup_postdata( $post );

if (have_rows('news_content',$postid)) {
       
    echo'<div class="news-single">';
        while (have_rows('news_content',$postid)) : the_row();
            if (get_row_layout() == 'section_title'){
                
            /// Post data here
            
            }
            
        endwhile;
    echo'</div>';
}
 wp_reset_postdata();
  wp_die();
 }

Perhaps the solution is not elegant, but it works, for me this is the main thing now.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.