Pagination Causes page to reload wordpress

  javascript, php, wordpress

i have the following page: https://nationalvip.pixl.work/test/
It shows custom post type called: webinars. Webinars have differente categories which are displayed in the tabs on the left.

When a Category is selected then webinars under that category (selected) are displayed to the right.

Pagination is displayed when there’re more than 2 webinars.

THERE’S MY ISSUE.

When you click the #2 of any category it shows you the articles from the Webinar Tab, it should not be that way.

I think this is happening because pagination reloads the page and shows the Webinar category by default.

How can I avoid the pagination to reload the page and show the correct articles that belong to that selected category?

here is my code:

<?php
    foreach($categories as $category) { 

            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = 
               array( 
                    'post_type' => 'webinar',
                    'posts_per_page' => 2,
                     'paged' => $paged,
                    'category_name' => $category->slug
              );
      
            query_posts($args);

            if ( have_posts() ) : while (have_posts()) : the_post();

                the_title(); 
      
            endwhile;     
      
      ?>
      
    <div class="pagination">
        the_posts_pagination( array(
            'prev_text' => __( '<', 'textdomain' ),
            'next_text' => __( '>', 'textdomain' ),
        ) );
    </div>

    <?php else : ?>
    <!-- No posts found -->
    <?php endif; ?>

<?php     
  
  }

And here is my Javascript:

function openWebinar(evt, webibarName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
 tabcontent[i].style.display = "none";
 }

 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
 }

  webibarName.style.display = "block";
  evt.currentTarget.className += " active";

 }

document.getElementById("defaultOpen").click();

Source: Ask Javascript Questions

LEAVE A COMMENT