Filter HubDB results with Checkbox

Occasional Contributor

I'm using the real estate example code to build out my own custom module for filtering my customers page based on the type of customer they are. 

 

The problem is that my customers can be many types. In my case a customer can be both a customer that fits the "marketing" category and the "corporate archive" category.

 

I've built multiple columns to house all the various customer types and checked the box for the customers in my table. Some fit one column while others fit two or more. 

 

In the real estate example you filter through the results based on a drop down menu. I'm wondering how we can filter with checkboxes instead...

 

Here is my sample code (with fake HubDB ID):

<!-- set the filter by drop down, search bar, and submit button -->

<div>
<form id="form_id" method="get">

<div>
<h4>FILTER BY CUSTOMER TYPE: </h4>
<input type="checkbox" name="type" form="form_id" onChange="this.form.submit()">
{% set customer_types = hubdb_table_column(12345, "marketing").options %}
{% for choice in types %}
{% set type_list = type_list~choice.id|marketing%}
{% 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 %}
</input>
</div>

</form>
</div>

<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.type in ["4", "5", "6", "7", "8", "9", "10", "11", "12"] %}
{% set queryparam = queryparam ~ "&type="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" %}
{% set queryparam = queryparam %}
{% endif %}


{% set table = hubdb_table_rows(12345, queryparam) %}

{% 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 %}
<div>
<div class="{{ row["type"].name }}">
<div><img src="{{ row["customer_image"].url}}"></div>
<div style="width: {{ widget.width }}px; height: {{ widget.height }}px; background: {{ widget.color }}; display: block; margin: {{ widget.margin }};"></div>
<div>
<p>{{ row["customer_description"] }}</p>
</div>
</div>
</div>
{% endfor %}
{% endif %}

How do I write the filter query for checkboxes instead of a drop down menu? Do I need to set a parameter like "type_list" for every column and write multiple If / Else statements?... 

 

Thanks!

2 Replies 2
New Contributor

Bump, I'm having an identicle struggle.

Highlighted
Occasional Contributor

I almost got it to work :-/

 

I used check boxes inside the <form> element, each representing a value from my multiple select field called 'Category': 

 

<input type="checkbox" name="category" value="1" form="form_id" onChange="this.form.submit()" {% if request.query_dict.category == "1" %}checked{% endif %} />
<label>Constulting</label>

 

Then I added the logic in the query for each checkbox, like:

 

{% set checkbox = "" %}
{% if request.query_dict.category == "1" %}
{% set checkbox = checkbox~"&category__contains="~request.query_dict.category|urlencode %}
{% endif %}

 

{% set table = hubdb_table_rows(<ID>, queryparam + checkbox ) %}

 

When checking the boxes, this would add the different parameters to the URL, like &category=1&category=2&category=3.

 

Unfortunately, this didn't filter rows for which the column Category had 1 AND 2 AND 3, it filtered rows that had 1 OR 2 OR 3.

 

Someone knows if I've missed anything?

 

Reply
0 Upvotes