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

Question

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?

0
Victor Sokoliuk 3 weeks 2021-11-10T12:23:46-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse