3

I'm having a problem with my ajax-loading when I'm on the english version of my page (My main language is Norwegian). I have a file named loadmore.html that I'm loading in on index.html when pressing a button. The problem is that this page won't show me the English version when I'm on the english version of the site. I really appreciate all your help. There's my code:

$('.showmemore_inner h2').on("click", function(e){
    $('.third_article_module').load('/loadmore.html');
    $('h2.lasterinn').css('display', 'block');
    return false;
    e.preventDefault();
});

Loadmore.html:

<ul>
    <div class="older_articles_container older_articles_loadmore">
        {% for entry in craft.entries.section('artikkel').order('dateCreated desc') %}
        <div class="ajax_article" data-id='{{ entry.id }}'>
            <li>
            {% for block in entry.bildekarusell.limit(1) %}
                {% if block.type == "bilde" %}
                    <div id="img_blocks">
                        {% for image in block.bilde %}
                        <a href="{{ entry.url }}">
                            <picture>
                                <!--[if IE 9]><video style="display: none;"><![endif]-->
                                <source srcset="{{ image.getUrl('hovedsideSekscolBilde') }}" media="(min-width: 990px)">
                                <source srcset="{{ image.getUrl('hovedsideSekscolBilde2') }}" media="(max-width: 990px) and (min-width: 625px)">
                                <!--[if IE 9]></video><![endif]-->
                                <img srcset="{{ image.getUrl('hovedsideSekscolBildeMobil') }}" alt="{{ image.title }}">
                            </picture>
                        </a>
                        {% endfor %}
                    </div>
                {% endif %}    
            {% endfor %}
            </li>
            <div class="group_sixcol">
                <li>
                    {% for category in entry.kategorier %}
                        <a href="{{ category.url }}">{{ category.title }}</a>
                    {% endfor %} 
                </li>
                <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
                <li><span class="time">{{ entry.postDate|date("M Y") }}</span></li>
            </div>
        </div>
    {% endfor %}
</div>

UPDATE: I tried this code in my _layout.html file but it's not working:

<script>
    $('.showmemore_inner h2').on("click", function(e){
        if ( '{{ craft.i18n.getCurrentLocale() }}' == '{{ craft.i18n.getPrimarySiteLocale() }}' {
            var url = '/loadmore.html';
        } else {
            var url = '/loadmore.html{{ craft.i18n.getCurrentLocale() }}/';
        }

        $('.third_article_module').load(url);
        $('h2.lasterinn').css('display', 'block');
        return false;
        e.preventDefault();
    });            
</script>
2

One issue may be that your javascript is requesting a specific url as defined from the site root, thus not giving craft the opportunity to do it's locale routing magic (keep in mind the url for languages other than the default locale may actually be '/no/loadmore.html' — or however you have defined the locale routes in your config settings). So just changing the request url in javascript may solve the problem.

$('.third_article_module').load('loadmore');

Another thing to keep in mind in general is that you can always specify a locale as part of the query, if you ever need to bypass or override craft's locale routing for some reason.

{% set locale = craft.i18n.getCurrentLocale() %}
{% set entries = craft.entries.section('artikkel').locale(locale).order('dateCreated desc') %}
{% for entry in entries %}
    ...
{% endfor %}

Another thing worth mentioning is that you could potentially also ajax load content from the current page template by using an isAjax conditional, thus eliminating the need for a separate 'loadmore' template altogether.

{% if not craft.request.isAjax %}
    {# render page content #}
{% endif %}

{% if craft.request.isAjax %}
    {# render loadmore content #}
{% endif %}

You can then just pass the entry url to your javascript and ajax load the current page (in this case I'm passing the url by defining a 'data-url' attribute on the .showmemore_inner h2 dom element; i.e. <h2 data-url="{{ entry.url }}">).

$('.showmemore_inner h2').on("click", function(e){
    e.preventDefault();
    var url = $(this).attr('data-url');
    $('.third_article_module').load(url);
    $('h2.lasterinn').css('display', 'block');
});

Note: also e.preventDefault() should come before any return statement or else it will never get a chance to fire.

1
  • Great! Curious... which one you end up going with? – Douglas McDonald May 15 '15 at 20:02

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.