I'm loading a template with ajax and I'm trying to close a few divs and a section in which the opening tags are in a different file. The closing tags aren't being recognized on the front-end, while it is recognized when I simply type something like 'test' where I now close the tags.
How can I make it recorgnize the closing tags?
{paginate}
{pagination_links}
</div>
</div>
</div>
</section>
{next_page}
<div class="loadmore">
<p>Laad meer...</p>
<a href="{pagination_url}" id="load_more"><span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
{/next_page}
{/pagination_links}
{/paginate}
Edit:
So this is the main template:
{layout="_layouts/vervolg"}
{layout:set name="main_content"}
<div class="all-projects">
<section>
<div class="container">
<div class="projects">
<div class="col-md-12 col-sm-12 col-sm-12 col-xs-12">
<h1>WIJ WERKTEN EERDER AAN<span class="blue"> DEZE PROJECTEN</span></h1>
</div>
<div class="row_projects">
<div id="portfolio_loader">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span class="sr-only">Laden...</span>
</div>
</div>
</div>
<div id="portfolio">
</div>
</div>
</div>
</div>
</section>
</div>
{/layout:set}
I'm loading the ajax in the tag. In order to make my template look okay, the load more button should be placed directly under the tag, but because the load more button is in the ajax template in order for it to work, it's not in the template above but in the ajax template right here:
<script>
$( "#load_more" ).click(function(e) {
e.preventDefault();
var url = $('#load_more').attr('href');
$.ajax({url: url, success: function(result){
$("#portfolio").append(result);
}});
$('.loadmore').remove();
});
</script>
{exp:channel:entries
channel="portfolio"
dynamic="no"
limit="1"
paginate="bottom"
paginate_base="/ajax/{segment_2}"
disable="categories|member_data"
}
<div class="col-md-3 col-sm-4 col-xs-6 portfolio-item">
<div class="square_box">
<div class="square-box">
<div class="overlay"><a href="{page_url}">{exp:ce_img:single src="{portfolio_afbeelding}" class="img-square img-responsive" crop="yes" width="330" height="264"}</a></div>
<h4>{title}</h4>
<h6><strong>Velg:</strong> {portfolio_velg}.</h6>
{exp:streeng characters="100" append=" - <a href='{page_url}'>Lees verder</a>"}
{portfolio_content}
{/exp:streeng}
</div>
</div>
</div>
{paginate}
{pagination_links}
</div>
</div>
</div>
</section>
{next_page}
<div class="loadmore">
<p>Laad meer...</p>
<a href="{pagination_url}" id="load_more"><span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
{/next_page}
{/pagination_links}
{/paginate}
{/exp:channel:entries}
As stated below however, the and tags aren't being recognized here and are being closed in my 'main' template instead of in the ajax template. To be clear: removing the closing tags in my 'main' template doesn't make a difference.