0

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?

2
  • you would need to include that data in your AJAX request, or keep track of it in the JS as you loop through each post ( would probably require the HTML to be modiified once AJAX returns it, and your loop to be refactored so you can peek at the next item ). As an aside, it's not necessary to use AJAX to put content in a lightbox, the approach you've taken is one of the more difficult methods
    – Tom J Nowell
    Nov 10, 2021 at 18:12
  • Thanks for your reply, I didn't think I could include this data into AJAX request. Thanks, I'll try. I just do not know of any other way to display posts in a modal window. Nov 10, 2021 at 19:30

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.