Get value from dropdown and use in Twig

Question

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')") %}
       ...

Answer 1

Twig (and all php) is processed server-side before javascript even gets initiated. And once the page renders in the browser there no way to interact directly with twig. The only two options that you have is to either 1) reload the page or 2) request a page segment via ajax. I would opt for the later in this case.

To do this, you could either listen for an onClick() event on a submit button of some kind, or listen for onChange() events on the drop-down menus themselves; which would trigger an ajax call to the server, and display the results in your placeholder 'div'.

On the craft side you would want to create a separate template that renders just the requested news articles, based on either: variables that you pass to the template via post; or using a custom route that you set up (i.e. '/news/2015/03/').

For an example of creating a page template using custom routes and ajax to load entries based on date, see this example. You will need to adapt it slightly to only use the month and year (vs. month, day, year).

For an ajax example, see this example — which links to additional examples.

If you have a hard time putting the pieces together, leave a comment and I'll try and provide a more specific example.