I’m creating an archive of news article entries. For that purpose, I’m trying to get a value from a dropdown (user-selected year and month) and then assign it to a pagination procedure that calls up all articles of that particular year and month.
However, from what I’ve read so far, you cannot pass a Javascript variable to Twig. Is there any other possibility of passing on user selection to Twig?
Thanks! :)
<div class="dropdown" style="float:left;">
<button class="btn btn-default dropdown-toggle text-sans" type="button" id="selectYear" data-toggle="dropdown">Year <span class="caret"></span></button>
<ul class="dropdown-menu text-sans" role="menu" aria-labelledby="selectYear">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2014</a></li>
</ul>
</div>
<div class="dropdown" style="float:left; margin:0 0 0 10px;">
<button class="btn btn-default dropdown-toggle text-sans" type="button" id="selectMonth" data-toggle="dropdown">Month <span class="caret"></span></button>
<ul class="dropdown-menu text-sans" role="menu" aria-labelledby="selectMonth">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">January</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">February</a></li>
...
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">December</a></li>
</ul>
</div>
<script type="text/javascript">
$('select[id="selectYear"]').change(function(){
var e = document.getElementById("selectYear");
var JSYEAR = e.options[e.selectedIndex].text;
})
$('select[id="selectMonth"]').change(function(){
var e = document.getElementById("selectMonth");
var JSMONTH = e.options[e.selectedIndex].text;
})
</script>
{% set firstDayOfMonth = JSYEAR ~ "-" ~ JSMONTH ~ "-01" %}
{% set daysInThisMonth = firstDayOfMonth|date('t') %}
{% set lastDayOfMonth = JSYEAR ~ "-" ~ JSMONTH ~ "-" ~ daysInThisMonth %}
{% set thisMonthsEntries = craft.entries.section(category).postDate('and', '>= ' ~ firstDayOfMonth, '<= ' ~ lastDayOfMonth) %}
{% paginate thisMonthsEntries as pageEntries %}
{% for date, articles in pageEntries | group("postDate|date('F Y')") %}
...