0

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="&nbsp;- <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.

  • If there are not enough entries for pagination to fire, then you 3 closing div tags and the section tag will not display. Why not put them just above the paginagte tag? Opening tags in one template and closing them in another is a good way to drive yourself crazy. – Jim Wyse Mar 21 '17 at 18:15
  • @JimWyse I'm aware of that. The point is that the tags aren't closing either way. Not even if I put them outside the whole channel entries tag. – user3478148 Mar 22 '17 at 7:14
  • That being the case, can you put up simplified code along with Ajax call so we can have a more complete picture pls. – stuartmcd69 Mar 22 '17 at 8:54
  • @stuartmcd69 I editted my question – user3478148 Mar 22 '17 at 12:16
0

Here, You can call default template as EE embed and use the same for ajax load. This will definitely help. (As I didn't tested the code, You may need to have some changes on code below)

Main template code:

{layout="_layouts/vervolg"}

{layout:set name="js"}
    <script type="text/javascript">
        $(document).on('click', '.load_more', function(e){
            e.preventDefault();
            $('.load_more').addClass('temp');

            var url = $('.load_more').attr('href');
            $.ajax({url: url, success: function(result){
                $("#portfolio").append(result);
            }});

            $('.temp').remove();
        });
    </script>
{/layout:set}

{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">
                    {!--Load file by default--}
                    {embed="ajax/my-file"}
                </div>
            </div>
        </div>
    </div>
</section>

</div>
{/layout:set}

Ajax Template code: (That is embed on load and then trigger via ajax every time)

{exp:channel:entries
    channel="portfolio"
    dynamic="no"
    paginate="bottom"
    disable="categories|member_data"
    limit="1"
}
    <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="&nbsp;- <a href='{page_url}'>Lees verder</a>"}
                {portfolio_content}
                {/exp:streeng}
            </div>
        </div>
    </div>

    {paginate}
        {pagination_links}
        {next_page}
            <div class="loadmore">
                <p>Laad meer...</p>
                <a href="{pagination_url}" class="load_more"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
        {/next_page}
        {/pagination_links}
    {/paginate}
{/exp:channel:entries}
| improve this answer | |
  • I know that, I've tried this already. The opening tags however are not on this page. They're in a different template. Closing the tags this way is not working. It doesn't matter where I put the tags, they're simply not closing. – user3478148 Mar 22 '17 at 7:13
  • Are you loading data via ajax? – Mufi - Amici Infotech Mar 22 '17 at 9:03
  • Yes I am. The template I'm showing you is the ajax template – user3478148 Mar 22 '17 at 10:02
  • Ok. Can you edit your question and put main page and ajax page code both and describe little bit why would you need end divs in ajax template inside pagination? – Mufi - Amici Infotech Mar 22 '17 at 11:41
  • I updated the question. I hope this clears it up for you. – user3478148 Mar 22 '17 at 12:15

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.