Add “load more” functionality to an AJAX response

This is all the code to also add “load more” functionality:

/*
  Widget name  : Filtering (accommodation)
  Parameters  : 'cpt'
  Function   : filtering()
*/
function filtering($filtering){

  $taxon = get_object_taxonomies($filtering['cpt']);
  $terms = get_terms($taxon[0]);

  $accs = new WP_Query([
    'post_type' => $filtering['cpt'],
    'posts_per_page' => 6,
    'order_by' => 'date',
    'order' => 'desc',
    'tax_query' => array(
      array(
        'taxonomy' => $taxon[0],
        'field' => 'slug',
        'operator' => 'EXISTS'
      )
    )
  ]);
  $found = $accs->found_posts;
  ?>

  <div class="filtering x-9">
    <div class="filtering-cpt">
      <a class="filtering-cpt-sin active" href="#!" data-load="<?php echo $found; ?>" data-type="<?php echo $filtering['cpt']; ?>" data-slug=""><?php _e('All','xlate'); ?></a>
      <?php foreach($terms as $term) : ?>
      <a class="filtering-cpt-sin" href="#!" data-load="<?php echo $term->count; ?>" data-type="<?php echo $filtering['cpt']; ?>" data-slug="<?php echo $term->slug; ?>"><?php echo $term->name; ?></a>
      <?php endforeach; ?>
    </div>

    <?php

    if ($accs->have_posts()): ?>
      <div class="filtering-res x-9">
        <?php while($accs->have_posts()) : $accs->the_post(); ?>
        <div class="filtering-res-sin x-3">
          <div class="filtering-res-sin-top">
            <?php
            $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), "large" );
            $get_map_link = get_post_custom_values($key = 'map');
            ?>
            <img src="<?php echo $image_data[0]; ?>" width="<?php echo $image_data[1]; ?>" height="<?php echo $image_data[2]; ?>" alt="<?php echo get_the_title(); ?>" />
          </div>
          <div class="filtering-res-sin-bot darkbg cropit xx-anim">
            <div class="filtering-res-sin-bot-tit"><?php echo get_the_title(); ?></div>
            <div class="filtering-res-sin-bot-bar"></div>
            <div class="filtering-res-sin-bot-tog">Contact information <img src="https://lgkm.aero/wp-content/uploads/2022/11/load-more-plus-white-14x14-1-1.svg" width="12" height="12" alt="+" /></div>
            <div class="filtering-res-sin-bot-con"><?php echo get_the_content(); ?></div>
            <a class="filtering-res-sin-bot-but" href="<?php echo (($get_map_link != '') ? $get_map_link[0] : ''); ?>"><img src="https://lgkm.aero/wp-content/uploads/2022/11/find-on-map-white-26x34-1.svg" width="26" height="34" alt="|" /> Find on map</a>
          </div>
        </div>
        <?php endwhile; ?>
      </div>
      <div class="filtering-load x-12" data-load="<?php echo $found; ?>" data-type="<?php echo $filtering['cpt']; ?>" data-slug="">Load more <img src="https://lgkm.aero/wp-content/uploads/2022/11/shop-plus-20x20-1.svg" width="14" height="14" alt="+" /></div>
      <?php wp_reset_postdata();
    endif; ?>
  </div>

<?php }

function filtering_ajax() {

  $catCpt = $_POST['type'];
  $terms = get_object_taxonomies($catCpt);
  $catSlug = $_POST['category'];

  if ($catSlug){
    $ajaxposts = new WP_Query([
      'post_type' => $catCpt,
      'posts_per_page' => 3,
      'orderby' => 'date',
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => $terms[0],
          'field' => 'slug',
          'terms' => $catSlug,
        )
      )
    ]);
  } else {
    $ajaxposts = new WP_Query([
      'post_type' => $catCpt,
      'posts_per_page' => 3,
      'orderby' => 'date',
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => $terms[0],
          'field' => 'slug',
          'operator' => 'EXISTS'
        )
      )
    ]);
  }

  $found = $ajaxposts->found_posts;
  $response="";

  if($ajaxposts->have_posts()) {
    while($ajaxposts->have_posts()) : $ajaxposts->the_post();
      $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), "large" );
      $get_map_link = get_post_custom_values($key = 'map');
      $response .= '
      <div class="filtering-res-sin x-3">
        <div class="filtering-res-sin-top">
          <img src="' . $image_data[0] . '" width="' . $image_data[1] . '" height="' . $image_data[2] . '" alt="' . get_the_title() . '" />
        </div>
        <div class="filtering-res-sin-bot darkbg cropit vsb xx-anim">
          <div class="filtering-res-sin-bot-tit">' . get_the_title() . '</div>
          <div class="filtering-res-sin-bot-bar"></div>
          <div class="filtering-res-sin-bot-tog">Contact information <img src="https://lgkm.aero/wp-content/uploads/2022/11/load-more-plus-white-14x14-1-1.svg" width="12" height="12" alt="+" /></div>
          <div class="filtering-res-sin-bot-con">' . get_the_content() . '</div>
          <a class="filtering-res-sin-bot-but" href="' . (($get_map_link != '') ? $get_map_link[0] : '') . '"><img src="https://lgkm.aero/wp-content/uploads/2022/11/find-on-map-white-26x34-1.svg" width="26" height="34" alt="|" /> Find on map</a>
        </div>
      </div>';
    endwhile;
  } else {
    $response="";
  }

  echo $response;
  exit;
}
add_action('wp_ajax_filtering_ajax', 'filtering_ajax');
add_action('wp_ajax_nopriv_filtering_ajax', 'filtering_ajax');



function filtering_ajax_load() {

  $catCpt = $_POST['type'];
  $terms = get_object_taxonomies($catCpt);
  $catOff = $_POST['offset'];
  $catSlug = $_POST['category'];

  if ($catSlug){
    $ajaxposts = new WP_Query([
      'post_type' => $catCpt,
      'posts_per_page' => 3,
      'offset' => $catOff,
      'orderby' => 'date',
      'paged' => 1,
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => $terms[0],
          'field' => 'slug',
          'terms' => $catSlug,
        )
      )
    ]);
  } else {
    $ajaxposts = new WP_Query([
      'post_type' => $catCpt,
      'posts_per_page' => 3,
      'offset' => $catOff,
      'orderby' => 'date',
      'paged' => 1,
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => $terms[0],
          'field' => 'slug',
          'operator' => 'EXISTS'
        )
      )
    ]);
  }

  $response="";

  if($ajaxposts->have_posts()) {
    while($ajaxposts->have_posts()) : $ajaxposts->the_post();
      $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), "large" );
      $get_map_link = get_post_custom_values($key = 'map');
      $response .= '
      <div class="filtering-res-sin x-3">
        <div class="filtering-res-sin-top">
          <img src="' . $image_data[0] . '" width="' . $image_data[1] . '" height="' . $image_data[2] . '" alt="' . get_the_title() . '" />
        </div>
        <div class="filtering-res-sin-bot darkbg cropit vsb xx-anim">
          <div class="filtering-res-sin-bot-tit">' . get_the_title() . '</div>
          <div class="filtering-res-sin-bot-bar"></div>
          <div class="filtering-res-sin-bot-tog">Contact information <img src="https://lgkm.aero/wp-content/uploads/2022/11/load-more-plus-white-14x14-1-1.svg" width="12" height="12" alt="+" /></div>
          <div class="filtering-res-sin-bot-con">' . get_the_content() . '</div>
          <a class="filtering-res-sin-bot-but" href="' . (($get_map_link != '') ? $get_map_link[0] : '') . '"><img src="https://lgkm.aero/wp-content/uploads/2022/11/find-on-map-white-26x34-1.svg" width="26" height="34" alt="|" /> Find on map</a>
        </div>
      </div>';
    endwhile;

  } else {
    $response=""; ?>
  <?php }

  echo $response;
  exit;
}
add_action('wp_ajax_filtering_ajax_load', 'filtering_ajax_load');
add_action('wp_ajax_nopriv_filtering_ajax_load', 'filtering_ajax_load');

Then the JS part:

<script>
jQuery('.filtering .filtering-cpt-sin').on('click', function() {

  jQuery('.filtering .filtering-cpt-sin').removeClass('active');
    jQuery('.filtering-load').removeClass('dis');
  jQuery(this).addClass('active');

    jQuery('.filtering-load').attr('data-type',jQuery(this).attr('data-type'));
    jQuery('.filtering-load').attr('data-slug',jQuery(this).attr('data-slug'));
    jQuery('.filtering-load').attr('data-load',jQuery(this).attr('data-load'));

  jQuery.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
            type: jQuery(this).attr('data-type'),
            offset: 0,
      action: 'filtering_ajax',
      category: jQuery(this).attr('data-slug')
    },
    success: function(res) {
      jQuery('.filtering .filtering-res').html(res);
    }
  })
});

jQuery('.filtering .filtering-load').on('click', function() {
    jQuery.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
            type: jQuery(this).attr('data-type'),
            offset: jQuery('.filtering-res-sin').length,
      action: 'filtering_ajax_load',
      category: jQuery(this).attr('data-slug')
    },
    success: function(res) {
      jQuery('.filtering .filtering-res').append(res);
            if (jQuery('.filtering-res-sin').length >= jQuery('.filtering-load').attr('data-load')){
                jQuery('.filtering-load').addClass('dis');
            }
    }
  })
});
</script>

Some CSS to make it pretty:

.filtering {display: flex;justify-content: center;flex-direction: column;align-items: center;gap: 50px 0;margin-right: auto;margin-left: calc( var(--grid) + var(--gutter) );}
.filtering-cpt {display: flex;gap: 0 20px;}
.filtering-cpt a {font-family: Averta;font-size: 21px;font-weight: 600;line-height: 20px;color:#979797;transition:color .3s;}
.filtering-cpt a.active {color:#000;}
.filtering-res {display: flex;flex-wrap: wrap;gap: calc(var(--gutter) * 2);counter-reset:count;}
.filtering-res-sin {display: flex;flex-direction: column;color:#fff;counter-increment:count;}
.filtering-res-sin a {color:#fff;}
.filtering-res-sin-top {display: flex;flex-direction: column;}
.filtering-res-sin-top img {aspect-ratio: 4/3;object-fit: cover;object-position: center;}
.filtering-res-sin-bot {padding: 42px 50px 42px 60px;display: flex;flex-direction: column;gap: 17px;position:relative}
.filtering-res-sin-bot::after {content:counter(count, decimal-leading-zero);position:absolute;left:20px;top:25px;color:#fff;font-family: Roboto;font-size: 15px;font-weight: 400;line-height: 21px;}
.filtering-res-sin-bot-tit {font-family: Averta;font-size: 24px;font-weight: 600;line-height: 29px;}
.filtering-res-sin-bot-bar {background-color:#474B56;width:100%;height:1px;}
.filtering-res-sin-bot-tog {font-family: Averta;font-size: 17px;font-weight: 600;line-height: 20px;display:flex;align-items:center;gap:0 7px;}
.filtering-res-sin-bot-but {font-family: Averta;font-size: 20px;font-weight: 600;line-height: 24px;display:flex;align-items:center;gap:0 13px;}
.filtering-load {display:flex;justify-content:center;gap:0 7px;cursor:pointer;font-family: Averta;font-size: 21px;font-weight: 600;line-height: 20px;}
.filtering-load.dis {opacity:0.4;cursor:not-allowed;}

And finally call the one function that does the trick:

$filtering = array('cpt' => 'accommodation');
filtering($filtering);

Just change the accommodation to your own custom post type.

Related Posts:

  1. Ajax takes 10x as long as it should/could
  2. Load minimum WordPress environment
  3. redirect out of wp-admin, without losing admin-ajax.php
  4. How to call a PHP function with Ajax when the user clicks a button
  5. Ajax for non-logged-in users
  6. Is there any way of of making an admin-ajax request without the use of die()?
  7. WordPress embeds in AJAX inserted content
  8. How do I send an ajax request and get a response back from a function?
  9. Automatically pull newer posts and append to current page.
  10. Load page content with AJAX using Fancybox?
  11. Dynamically changing navigation links (next and previous) via AJAX
  12. edit-comments.php comment_row_actions ajax problem
  13. Why is my AJAX call not working?
  14. How to Access custom database content with AJAX onClick refresh of div inside member-only WordPress page?
  15. how to use reCaptcha v3 in wordpress custom login form?
  16. admin-ajax.php HTTP400: BAD REQUEST – The request could not be processed by the server due to invalid syntax
  17. AJAX action not triggering PHP function
  18. WP_Session not acting with AJAX
  19. add_action and Ajax
  20. Embedded Twitter feed won’t render nicely when loaded via Ajax
  21. Enqueue script dinamically
  22. Most performant way of fetching remote API data?
  23. Admin-ajax responds with 0 due to empty $_REQUEST
  24. Help with AJAX front end comment moderation
  25. Enqueue script in header
  26. Using ajax with wordpress
  27. Using foreach inside an ajax function
  28. wp_ajax_nopriv_xxx is not firing on one site, works on all others. -1 for logged out users
  29. WP_User_Query ignoring ‘meta_query’ arguments
  30. Ajax Modal Flickers When Opened Multiple Times
  31. Increased CPU load due to admin-ajax.php spam
  32. Can’t get result from sql using ajax result
  33. Theme Customizer – Conditional Controls
  34. Edit a different page in WP Customizer
  35. Get the_content with ajax
  36. Caching-Plugins and Ajax-Page-Parts
  37. WordPress AJAX – how to return true or false in the callback function
  38. Admin ajax error 400 when passing select value to populate another select
  39. WordPress Ajax POST Error 403 admin-ajax.php
  40. Which allowed API hooks work to add wp_ajax action?
  41. Pass additional parameter with async upload
  42. AJAX request randomly stop working and returns error 400
  43. Sending variable from ajax on form submit
  44. Performance optimization of tree like structure
  45. WordPress search results with Ajax, get_post_type() not working
  46. How can I set cookies on both secure and non-secure origins at the same time?
  47. Audio TAG Not using MediaElement When Page is loaded through ajax
  48. Best way to use ajax front-end?
  49. Ajax calls from the theme directory
  50. How to pass parameters from jQuery ajax into PHP function?
  51. ajax is returning 0
  52. How to add ajax url to js using wp_add_inline_script()?
  53. use jQuery.load() to include a php file in a div, wp_query() is part of php file
  54. WP AJAX post filter > do something with empty value
  55. How to make a fetch() POST request to wordpress rest api?
  56. Load more posts in the same category – Ajax + Timber
  57. How to jQuery Ajax show new data from successful insert?
  58. Redirect after saving form; and yet use wp_die()
  59. ajaxt returning object object [closed]
  60. Load more posts (Ajax) in tabbed sidebar on single.php
  61. Something strange with ajax
  62. admin-ajax.php returns 0 even when the post status code is 200 OK
  63. Why is the file not uploading to the server?
  64. Get localize of a loaded javascript
  65. is there’s a way to get the next page content generated by page break block with ajax call?
  66. Merge PDF files from post custom fields(ACF) into one PDF file and respond back the created PDF file, WordPress(AJAX Request)
  67. REST public POST giving 403 forbidden nginx
  68. Query data after an Ajax insert
  69. How to get next and previous post into ajax formed modal windows?
  70. Passing value from select form with Ajax not working
  71. Sending email through Ajax without page refresh hangs on admin_ajax.php
  72. Why Ajax Doesn’t Work?
  73. Content including hooks inside wp-settings.php are being called twice in WordPress
  74. Problem when sending file via ajax
  75. wp_verify_nonce not working on the mobile device
  76. Frontend AJAX Media Upload returning 404
  77. JS global variable doesn’t update
  78. 404 error custom post type rest api
  79. Change button text after ajax db update
  80. How to implement AJAX within a class storing shortcode atts as class variables
  81. Jquery wrap permalink in a data-attribute?
  82. How do I display posts of a specific day?
  83. (Frontend AJAX) get post data WITH image thumbnail?
  84. Load .php file into div using ajax
  85. Native WordPress Video Shortcode Not Working After Post is Loaded via Ajax
  86. Ajax Function call is always returning 0 in front end(without plugin) [closed]
  87. Ajax live search, “No products found” when the title contains apostrophes and quotations
  88. Add Ajax loaded posts to existing posts
  89. Using AJAX for dynamic settings pages
  90. Speeding up admin-ajax.php
  91. admin ajax is not working for non logged in users
  92. Change search to outpout category name instead of Post type name
  93. ‘Dehighlighting’ navigation once clicked
  94. wp_localize_script not create variable in head section
  95. AJAX admin Internal 500 error Failed to Upload
  96. Class property not visible inside ajax callback function?
  97. wordpress ajax bad request 400
  98. how to update pagination after ajax call page 2 show 0
  99. get_permalink() returns in wrong format via AJAX
  100. How to add a “Load more” button for the comment section in WordPress?
techhipbettruvabetnorabahisbahis forumutaraftarium24eduedueduseduedueduedueduedusedu