HubDB Multiple that work separately

Develop, Build & Integrate CMS Development
1

I’ve got an Image gallery built with HubDB.

There are 2 dropdown filters (Application, State)

They are currently working together so the url becomes something like this when the filters are selected:

mysite.com/gallery-3?application=1&state=9

I’d like the user to only be able to use one filter at a time. So if a state is selected, the application resets to “show all” or “application=1” is removed from the url.

Does anyone know how I could code that?

Here is the current code:

<div style="margin: 0 0 60px 0;">
<form id="form_id" method="get">
 <div>
 <div class="drop-half">
 <h5>FILTER BY APPLICATION TYPE: </h5>
 <select name="application" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set applications = hubdb_table_column(XXXXXX, "Application").options %}
 {% for choice in applications %}
 {% set application_list = application_list~choice.id|list%}
 {% if choice.id == request.query_dict.application%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
 </div>
 <div class="drop-half">
 <h5>FILTER BY STATE: </h5>
 <select name="state" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set states = hubdb_table_column(XXXXXX, "State").options %}
 {% for choice in states %}
 {% set state_list = state_list~choice.id|list%}
 {% if choice.id == request.query_dict.state%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
 </div>
 <div class="clear"></div>
 </div>

</form>
</div>

{% set applicationquery = "" %}
{% if request.query_dict.application in ["1", "2", "3", "4", "5", "6", "7"] %}
 {% set applicationquery = applicationquery ~ "&application__contains="~request.query_dict.application|urlencode %}
{% endif %}
{% if request.query_dict.application == "show-all" %}
 {% set applicationquery = applicationquery %}
{% endif %}

{% set statequery = "" %}
{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] %}
 {% set statequery = statequery ~ "&state="~request.query_dict.state|urlencode %}
{% endif %}
{% if request.query_dict.state == "show-all" %}
 {% set statequery = statequery %}
{% endif %}

<div class="row-fluid">
{% set table = hubdb_table_rows(XXXXXX, applicationquery + statequery) %}
{% if table == [] %}
 <p class='align-center'>Sorry, no listings found for that Search. Try changing your filter and search again.</p>
{% else %}
 <div class="light-gal-wrap">
 {% for row in table %}
 <figure>
 <a href="{{ row.image.url }}" data-fancybox="images">
 <div class="thumb-hold" style="background: url({{ row.image.url }});"></div>
 </a>
 <figcaption>
 <strong>{{ row.image_description }}</strong>
 <div class="location">{{ row.city }}, {{ row.state.name }} </div>
 <div class="button-wrap">
 {% if row.profile_url %}
 <a class="prof-but" href="{{ row.profile_url }}" target="_blank">View Project Profile</a> 
 {% endif %}
 </div>
 </figcaption>
 </figure>
 {% endfor %}
 </div> 
{% endif %}
</div>

Any help is greatly appreciated!

2

Hey @jestlinbaum,

My understanding of what you’re doing here could be wrong, so feel free to link me to your page if this doesn’t really answer your question. But what about doing this with some JS? It looks like you’ve got 2 <select> elements with <option>s inside. Could you bind event handlers to those <select> elements listening for the onchange event: https://www.w3schools.com/jsref/event_onchange.asp. And then when that <select>'s value changes, just reset the value of the other <select> ? I’m sure there’s different ways of doing it, but with a quick Google search I found this: https://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript.

That way your applicationquery and statequery variables won’t get set to specific values, and thus filter down your table. And also, visually your visitors will understand that only one filter has been applied.

And again if I’ve misunderstood, let me know and I’m happy to look at the page, which I think would help me visualize things.

- Leland

3

Hey @lscanlan

Thanks you for responding! I arrived at the same conclusion earlier today with a little help from Matt on the Slack thread. JS is definately what I need.

$("#appdrop").change(function () {
 $("#statedrop").val('');
 this.form.submit();
});

$("#statedrop").change(function () {
 $("#appdrop").val('');
 this.form.submit();
});

I also reformatted some things. Just posting for if others want to see.

I combined the 2 queries into one. This allowes the URL to only have the one filter in it. So instead of

?application=show-all&state=7

You will just get

?state=7
or
?application=2

Full finished code below.

Thanks again!

<div style="margin: 0 0 60px 0;">
<form id="form_id" method="get">
 <div class="filter-hold">
 <div class="drop-half">
 <h5>FILTER BY APPLICATION TYPE: </h5>
 <select name="application" id="appdrop" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set applications = hubdb_table_column(xxxxx, "Application").options %}
 {% for choice in applications %}
 {% set application_list = application_list~choice.id|list%}
 {% if choice.id == request.query_dict.application%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
 </div>
 <div class="gal-or">
 OR
 </div>
 <div class="drop-half">
 <h5>FILTER BY STATE: </h5>
 <select name="state" id="statedrop" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set states = hubdb_table_column(xxxxx, "State").options %}
 {% for choice in states %}
 {% set state_list = state_list~choice.id|list%}
 {% if choice.id == request.query_dict.state%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
 </div>
 <a class="fil-clear" href="/gallery-3">Reset</a>
 <div class="cta-hold">
 {% cta "my_cta" label='Select a CTA', guid='465d-8b11-2c415b17b6b3'%}
 </div>
 </div>

</form>
</div>

{% set queryparam = "" %}

{% if request.query_dict.application != "show-all" && request.query_dict.application is truthy %}
 {% set queryparam = queryparam ~ "&application__contains="~request.query_dict.application|urlencode %}
{% endif %}

{% if request.query_dict.state != "show-all" && request.query_dict.state is truthy %}
 {% set queryparam = queryparam ~ "&state="~request.query_dict.state|urlencode %}
{% endif %}

<div class="row-fluid">
{% set table = hubdb_table_rows(1042170, queryparam) %}
{% if table == [] %}
 <p class='align-center'>Sorry, no listings found for that Search. Try changing your filter and search again.</p>
{% else %}
 <div class="light-gal-wrap">
 {% for row in table %}
 <figure>
 <a href="{{ row.image.url }}" data-fancybox="images">
 <div class="thumb-hold" style="background: url({{ row.image.url }});"></div>
 </a>
 <figcaption>
 <strong>{{ row.image_description }}</strong>
 <div class="location">{{ row.city }}, {{ row.state.name }} </div>
 <div class="button-wrap">
 {% if row.profile_url %}
 <a class="prof-but" href="{{ row.profile_url }}" target="_blank">View Project Profile</a> 
 {% endif %}
 </div>
 </figcaption>
 </figure>
 {% endfor %}
 </div> 
{% endif %}
</div>
4

That’s great! Thanks for sharing the solution.