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?

1 Answer 1

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');
        });
    });
});

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .