0

I want to load entries belonging to different categories using AJAX. Currently everything works without AJAX, reloading the page on category selection. There's a parent template, then an embed that holds the entries. Category is detirmined by segment_2 (category id obtained via Low Seg2Cat).

Parent Template:

<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <a href="{site_url}casestudies" class="load-case-studies{if "{segment_2}"==""} active{/if}" title="All">all</a>
      <a href="{site_url}casestudies/branding" class="load-case-studies{if "{segment_2}"=="branding"} active{/if}" title="">category 1</a>
      <a href="{site_url}casestudies/web" class="load-case-studies{if "{segment_2}"=="web"} active{/if}" title="">category 2</a>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <h2>case studies</h2>
      <ul id="case-studies-container" class="list-case-studies">
      {embed="embeds/list-case-studies" category="{segment_2_category_id}"}
      </ul>
    </div>
  </div>
</div>

Embedded Template:

{exp:channel:entries channel="case_studies" category="{embed:category}" dynamic="no" disable="category_fields|member_data|pagination" limit="9"}
<li>
  ...
</li>
{/exp:channel:entries}

I added the following script to the footer:

$(document).on('click', '.load-case-studies', function(event) {
  var url = $(this).attr('href');
  $('#case-studies-container').load(url);
  event.preventDefault();    
});

But this loads the whole page into my container, not just the filtered entries. How can I achieve the result I'm looking for?

0

Found the answer - I used a variation on a pagination solution:

HTML

<div class="row">
  <div id="entry-container" class="col-sm-12 ajax-wrapper" data-behaviour="moreEntries">
    <ul class="list-case-studies">
      <li>...</li>
    </ul>
  </div>
</div>

JQuery

    $(document).ready(function()
{
    $('.sub-nav').delegate('.load-case-studies', 'click', function(e)
    {
        // Don't follow the link
        e.preventDefault();

        $('.sub-nav a').removeClass('active');
        $(this).addClass('active');

        // Fetch the entries
        $.get($(this).attr('href'), function(data)
        {                                           
            // Only grab the part of the page we want
            content = $(data).find('.ajax-wrapper').hide();

            // Add it to the DOM
            $(content).replaceAll('#entry-container');

            // Fade-in our new content
            $(content).fadeIn('fast');
        });
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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