CMS Development

jestlinbaum
Participante

HubDB Multiple that work separately

resolver

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!

0 Avaliação positiva
1 Solução aceita
lscanlan
Solução
Alunos da HubSpot
Alunos da HubSpot

HubDB Multiple that work separately

resolver

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-el....

 

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

Leland Scanlan

HubSpot Developer Support

Exibir solução no post original

0 Avaliação positiva
3 Respostas 3
lscanlan
Solução
Alunos da HubSpot
Alunos da HubSpot

HubDB Multiple that work separately

resolver

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-el....

 

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

Leland Scanlan

HubSpot Developer Support
0 Avaliação positiva
jestlinbaum
Participante

HubDB Multiple that work separately

resolver

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>

lscanlan
Alunos da HubSpot
Alunos da HubSpot

HubDB Multiple that work separately

resolver

That's great! Thanks for sharing the solution.

Leland Scanlan

HubSpot Developer Support
0 Avaliação positiva