Craft - load more with AJAX

ajax-team.twig

{% set teamIdsToExclude = ['and'] %}

{% for excerpt in craft.entries.section('team').limit(12) %}
  {% set teamIdsToExclude = teamIdsToExclude|merge([excerpt.id]) %}
{% endfor %}

{# Convert the teamIdsToExclude array into a comma separated list #}
{% set teamIdsToExcludeString = teamIdsToExclude|join(', not ') %}

{% for excerpt in craft.entries.section('team').id(teamIdsToExcludeString) %}
  <figure class="js-teamMember--result flex col col-12 sm-col-6 md-col-4 lg-col-3">
    {% include 'partials/team/excerpt' %}
  </figure>
{% endfor %}

index.twig

{% extends (craft.request.isAjax and not craft.request.isLivePreview) ? 'layouts/ajax' : 'layouts/main' %}

{% block content %}

  {# If not AJAX or is Live Preview #}
  {% if not craft.request.isAjax or craft.request.isLivePreview %}
  {% cache unless not craft.config.cache %}

    {% include 'partials/heros/basic' with {
      baseBgImage: entry.featuredImage.first,
      heading: entry.heroHeading,
      subheading: entry.heroSubheading
    } %}
    {% include 'partials/culture/what' %}
    {% include 'partials/culture/info' %}
    {% include 'partials/culture/team' %}
    {% include 'partials/culture/effect' %}
    {% include 'partials/culture/mvv' %}

  {% endcache %}
  {% endif %}


  {# If AJAX and not Live Preview #}
  {# Gets team members that aren't already displayed #}
  {% if craft.request.isAjax and not craft.request.isLivePreview %}
    {# Currently, not being used since the full team is displayed on page load. #}
    {% include 'partials/culture/ajax-team' %}
  {% endif %}

{% endblock %}

loadMore.js

// *************************************
//
//   -> Loads the rest of the team members on demand
//
// *************************************
var loadEntireTeam = function(event){
  event.preventDefault();

  /* ----- Unfocuses clicked button ----- */
  $(this).blur();

  var $resultsContainer  = $('.js-team-container'),
      $loadTrigger       = $('.js-team--loadmore'),
      $loadTriggerParent = $loadTrigger.parent(),
      $cssLoader         = $('.js-css-loader'),
      url                = $loadTrigger.data('href'),
      errorMessageHTML   = '<p class="italic m0">Unable to load the rest of the team. Please refresh and try again.</p>'

  /* ----- Fade out button and fade in loader animation ----- */
  $loadTrigger.velocity('fadeOut');
  $cssLoader.velocity('fadeIn', {
    display: 'inline-block'
  });

  $.post(url, function(result) {
    /* ----- Add the rest of the team members to page ----- */
    $resultsContainer.html(result);

    bLazy.revalidate();

    /* ----- Removes the load more button & loader container ----- */
    $loadTriggerParent.velocity('fadeOut', {
      complete: function() {
        $(this).remove();
      }
    });

    /* ----- Fade in each team member ----- */
    $('.js-teamMember--result').velocity('transition.slideUpIn', {
      duration: 200,
      stagger: 50,
      display: 'flex',
      visibility: 'visible'
    });
  }, 'html')
  .fail(function() {
    $loadTriggerParent.html(errorMessageHTML);
  });
};

$(document).on('click', '.js-team--loadmore', loadEntireTeam);

team-excerpt.twig

{% set inlineLoader = craft.config.environmentVariables['inlineLoader'] %}

{# Only make the excerpt a link if the person has a bio #}
{% if excerpt.teamBio|length %}
  <a class="js-modal--ajax team-member box-shadow bg-white row" href="{{ excerpt.url }}">
{% else %}
  <div class="box-shadow bg-white row">
{% endif %}

<div class="py3 px2 row">
  <div class="mb2 row">
    <div class="mx-120px mx-auto">
      <div class="ratio__square circle">
        <img class="b-lazy block circle" data-src="{{ excerpt.teamPortrait.first.url('staffSmall') }}" src="{{ inlineLoader }}" alt="{{ excerpt.title }}">
      </div>
    </div>
  </div>
  <h3 class="black h4 m0">{{ excerpt.title }}</h3>
  <h4 class="orange h5 font-body italic semibold ls-normal tt-none m0">{{ excerpt.teamPosition }}</h4>
</div>

{% if excerpt.teamBio|length %}
  </a>
{% else %}
  </div>
{% endif %}