CMS Development

jpineda91
Contributor

hubDB show-all filter

SOLVE

Hi everyone,
I'm trying to add a filter on a resource library that displays all assets, here is my code:

<select name="topic">
      <option value="">View Resources By Type</option>
      <option value="show-all">Show All</option>

      {% set content_type_array = [] %}
      {% for content_type in resource_content_type|map(attribute='content_type') %}
      {% unless content_type.name in content_type_array %}
        {% unless content_type.name == null %}
          {% do content_type_array.append(content_type.name) %}
        {% endunless %}
      {% endunless %}
      {% endfor %}
      {% for item in content_type_array %}
        <option {% if request.query_dict.topic == item %} selected{% endif %}>{{ item }}</option>
      {% endfor %}
      </select>
      <script>
        jQuery('select[name="topic"]').on('change',function(){
          let topic = jQuery(this).val();
          if(topic !='') {
            document.location.href='{{module.resources_page_link.url.href}}?topic={{tag}}'+topic;
          }
          else {
            document.location.href='{{module.resources_page_link.url.href}}';
          }    
        });
      </script>

 with the else{} it still adds ?topic=show-all to the URL path.

Any help is appreciated!

 

-Jonathan

0 Upvotes
1 Accepted solution
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

hubDB show-all filter

SOLVE

@jpineda91 It looks like your module.resources_page_link.url.href variable is returning blank. When document.location.href is set to blank it just refreshes the page.

 

link-variable.png

 

If you're just going to be staying on the same page then I don't think a variable is necessary you could use the location object in javascript instead.

 

jQuery('select[name="topic"]').on('change',function(){
  let topic = jQuery(this).val();
  let link = location.protocol + '//' + location.host + location.pathname;

  if(topic && topic != 'show-all')) {
    document.location.href = link + '?topic={{tag}}' + topic;
  } else {
    document.location.href = link;
  }    
});

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


View solution in original post

5 Replies 5
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

hubDB show-all filter

SOLVE

@jpineda91 It looks like your module.resources_page_link.url.href variable is returning blank. When document.location.href is set to blank it just refreshes the page.

 

link-variable.png

 

If you're just going to be staying on the same page then I don't think a variable is necessary you could use the location object in javascript instead.

 

jQuery('select[name="topic"]').on('change',function(){
  let topic = jQuery(this).val();
  let link = location.protocol + '//' + location.host + location.pathname;

  if(topic && topic != 'show-all')) {
    document.location.href = link + '?topic={{tag}}' + topic;
  } else {
    document.location.href = link;
  }    
});

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


jpineda91
Contributor

hubDB show-all filter

SOLVE

@amwilie 
Thank you so much! It worked 👍

0 Upvotes
amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

hubDB show-all filter

SOLVE

@jpineda91 Do you have a public preview link I could look at to see what's going on?

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


0 Upvotes
amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

hubDB show-all filter

SOLVE

@jpineda91 The value when selecting Show All isn't empty, it's "show-all", so either remove the value from the Show All option or change your if statement to:

 

if(topic && topic != 'show-all')) {
  document.location.href='{{module.resources_page_link.url.href}}?topic={{tag}}'+topic;
} else {
  document.location.href='{{module.resources_page_link.url.href}}';
} 

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


0 Upvotes
jpineda91
Contributor

hubDB show-all filter

SOLVE

Hi @amwilie 
Thank you so much for your reply!
I tried updating the code with your suggestion, but when I click on the Show All option it reloads the page with the same path (?topic=.....)

0 Upvotes