<div id=resources>
<!-- FEATURED RESOURCE PANEL -->
{% set table = hubdb_table_rows(848813, "resource-order=1") %}
{% if table == [] %}
<p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
{% for row in table %}
<a href="{{ row["resource_url"] }}">
<div id="featured-resource-container" >
<div id="featured-resource" >
<div class="{{ row["type"].name }}">
<div class=resource-thumbnail>
<div class=content-type-icon><img src="{{ row["content-type-icon"].url}}"></div>
<img src="{{ row["thumbnail"].url}}">
</div>
<div class="resource-details">
<h1>Featured Resource</h1>
<p class="resource-type">{{ row["resource-type"].name }}</p>
<h2>{{ row["resource-title"] }}</h2>
<div class="focus">
<p>Focus Areas:</p>
<ul class="tag">
{% for area in row["area"] %}
<li>{{area.name}}</li>
{% endfor %}
</ul>
</div>
<!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
</div>
</div>
</div>
</div>
</a>
{% endfor %}
{% endif %}
<!-- FILTER -->
<div>
<form id="form_id" method="get">
<div>
<h4>FILTER BY LISTING TYPE: </h4>
<select name="type" form="form_id" onChange="this.form.submit()">
<option value="show-all">Show All</option>
{% set types = hubdb_table_column(848813, "resource-type").options %}
{% for choice in types %}
{% set type_list = type_list~choice.id|list%}
{% if choice.id == request.query_dict.type%}
<option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
{% else %}
<option value="{{ choice.id }}">{{ choice.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</form>
</div>
<!-- RESOURCE PANELS -->
{% set table = hubdb_table_rows(848813, "&orderBy=resource-order") %}
{% if table == [] %}
<p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
{% for row in table %}
<a href="{{ row["resource_url"] }}">
<div class="resource-container" >
<div id="resource-listing" >
<div class="{{ row["type"].name }}">
<div class=resource-thumbnail>
<div class=content-type-icon><img src="{{ row["content-type-icon"].url}}"></div>
<img src="{{ row["thumbnail"].url}}">
</div>
<div class="resource-details">
<p class="resource-type">{{ row["resource-type"].name }}</p>
<h2>{{ row["resource-title"] }}</h2>
<div class="focus">
<p>Focus Areas:</p>
<ul class="tag">
{% for area in row["area"] %}
<li>{{area.name}}</li>
{% endfor %}
</ul>
</div>
<!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
</div>
</div>
</div>
</div>
</a>
{% endfor %}
{% endif %}
</div>
I have got the dropdown to call the options from the hubDB but I am unsure how to make the selection update the table below.
I have two versions of the table displaying on the page. One is just showing the Featured Resource and the second table is showing the other resources.
There are only three ways I can think if to acheive this.
1. using the url and queries. You would need to append the filter to the url and reload the page. Collect the query in a HubL variable. use the query to filter the database which would output items the correspond to the filter.
2. Using Ajax. When the filter is selected you have to send it to the database and recieve the results. Ajax allows you to update parts of a page without reloading the entire page. I haven't use Ajax with HubDB yet though so I don't have much on the topic.
3. jquery filter. You can use jquery to hide elements and show them based on selected filters. I don't like this because the hidden items still exist on the page, and to filter them you are probably going to have to do something obscure like check the text contained in an element. If you have full markup control then it would be a lot cleaner.