# Set Up A Custom Filter for Blog Posts by Topic

**URL:** <https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751>\
**Category:** APIs & Integrations\
**Tags:** cms-content\
**Created:** [May 21, 2021, 6:44pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751 "2021-05-21T18:44:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\
**Post date:** [May 21, 2021, 6:44pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/1 "2021-05-21T18:44:07Z")

</div>

I am hoping to create a more sophisticated blog post filter than what is [available](https://knowledge.hubspot.com/cos-general/how-can-i-allow-visitors-to-filter-my-blog-posts-by-tag-author-or-month). I do not want users to leave the current page when filtering the blog posts.

I also do not want to simply hide/show posts with jQuery based on the topic because say I have post listings paginated by 10, then I’m really only filtering 10 posts and not all posts. Some topics may not appear in the first 10 posts.

What I am thinking is I could create a module that would accept URL parameters like so:

```lia-code-sample
{% set topic = request.query_dict.filter %}
{% if topic %}
 {% set posts = blog_recent_tag_posts('my_blog_id', topic) %}
{% else %}
 {% set posts = blog_recent_posts('my_blog_id') %}
{% endif %}

{% for content in posts %}
 {# SHOW POST CONTENT IN HERE #}
{% endfor %}

```

and then use AJAX to call that module when the filter is used:

```lia-code-sample
$('a#filter').click(function(e) {
 var filterVALUE = $(this).attr('filter-value');
 $.ajax({
 type: 'GET',
 url: '/modules/my-module-url',
 data: { 
 filter: filterValue
 },
 success:function(data){
 // SUCCESS LETS POST THE POSTS!
 }
 });
 });

```

but the problem I am finding is that it doesn’t seem you can just call a module via AJAX. Is that the case?

Am I going about this all wrong and should I be using the Hubspot API? Seems like I should be able to use native Hubspot functions to get posts so perhaps there is a better way to do this?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [May 21, 2021, 7:04pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/2 "2021-05-21T19:04:23Z")

</div>

@squatchcreative ,

I do believe you will have to rethink this a bit

@Anton , @stefen , @piersg how would you go about this?

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [May 24, 2021, 10:45am UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/3 "2021-05-24T10:45:57Z")

</div>

Hi @squatchcreative, no you can’t use AJAX to call a module. That’s mixing server side (HubL modules) and client side (JS). I think your best bet for this would be to use the [Blog Posts API](https://developers.hubspot.com/docs/api/cms/blog-post), as you hinted, and then return results where the tag id is the selected filter (and state = published/ etc.). Using JS to retrieve this info can return as many posts as you want, set by the limit; you can set the limit to whatever e.g. 500 or something. You wouldn’t be limited to filtering what was already on the page.

---

<div class="post-metadata">

**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\
**Post date:** [May 24, 2021, 2:36pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/4 "2021-05-24T14:36:07Z")

</div>

Thanks for your help @dennisedson @piersg . I kinda figured that was the route I had to go. Seems odd to use that method when I am building out the website and that functionalilty through the native application, whereas I would normally look to use an API for an external application. It would be great to mix server-side + client side with fetch or AJAX one day.

I appreciate the insight.

---

<div class="post-metadata">

**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\
**Post date:** [May 25, 2021, 9:08pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/5 "2021-05-25T21:08:27Z")

</div>

So, looking at the [docs for the CMS API V3](https://developers.hubspot.com/docs/api/cms/blog-post), I should be able to just use my API key to query posts and then I have to filter through them by tag? Is that the most efficient way? There is no params to pass for a specific tag is there… ?

Also, what needs to be done on my end to allow CORS _ **on my own domain/application** _? If I do a quick example like below I automatically get the “XMLHttpRequest at xxxx from origin xxxx has been blocked by CORS policy” error.

```lia-code-sample
$(document).ready(function() {
 $.ajax('https://api.hubapi.com/cms/v3/blogs/posts?hapikey=XXXXXXXXXXXXXXXXXX')
 .then(
 function success(response) {
 console.log(response);
 },
 function fail(data, status) {
 console.log('Request failed. Returned status of',
 status);

 }
 );
});

```

…but this is my natively hosted Hubspot CMS website and a module within it that is calling the API.

Can this be adjusted in settings to allow my own domain or something?

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [May 26, 2021, 9:21am UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/6 "2021-05-26T09:21:34Z")

</div>

Ah, I forgot about the Hubspot API CORS policy. As per @Willson : The HubSpot APIs do not support support CORS AJAX requests. Making the request client-side using JavaScript would expose any authentication you’re using for the request.

In order to use JavaScript/AJAX, you would need to make the request (excluding any authentication) to an external server that could then add the needed authentication and make requests to HubSpot’s APIs server-side.

The exceptions to this rule are:

- The [Submit form data (AJAX)](https://developers.hubspot.com/docs/methods/forms/submit_form_ajax) endpoint, which accepts CORS AJAX form submissions.
- Most GET requests for published HubDB tables

The suggestion is to use a proxy server, e.g. if you have access to Hubspot Serverless functions you can do it with that.

---

<div class="post-metadata">

**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\
**Post date:** [May 27, 2021, 6:07pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/7 "2021-05-27T18:07:58Z")

</div>

I have to say -- that is a huge disappointment. It seems odd to have to set up an external proxy server to query my own posts after the page has loaded within a native website in Hubspot.

If there was a way to execute standalone .hubl files or HubL asynchronously, something along those lines, it would certainly add much desired functionality.

I appreciate the help and insight @piersg . Hoping those features get rolled out someday.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [May 28, 2021, 8:46am UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/8 "2021-05-28T08:46:07Z")

</div>

Yeah, maybe HS adding more to the exceptions list e.g. GET requests to Blog posts/web pages etc. I was thinking of suggesting you use the Search API (can be used client side), but a search term is required sadly.

---

<div class="post-metadata">

**Author:** ![IWebteam](https://avatars.discourse-cdn.com/v4/letter/i/8e7dd6/32.png) [@IWebteam](https://community.hubspot.com/u/IWebteam)\
**Post date:** [May 10, 2022, 2:43pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/9 "2022-05-10T14:43:35Z")

</div>

@squatchcreativeand anyone else who is intrested, I have figured out a work around to the ajax issue without having to reload the browser.

`

{% set urlpath = request.path|replace(‘-’, ’ ‘)|replace(’/‘, ‘’)|replace(‘blog’, ‘’)|replace(‘tag’, ‘’)|replace(’ ', ‘’) %}  
{% set my\_topics = blog\_topics(‘default’, 250) %}

\<!--List all topics--\>  
\<nav id=“topicMenu” class=“blog-filter-options”\>  
{% for item in my\_topics %}  
\<a class=“blog-filter-option-link {% if urlpath is string\_containing item|string|lower|replace(‘&’, ‘’)|replace(’ ‘, ‘’) |replace(’ ', ‘’) %}selected{% endif %}” href=“{{ blog\_tag\_url(group.id, item.slug) }}”\>{{item}}\</a\>  
{% endfor %}  
\<a class=“blog-filter-option-link” href=“{{ group.absolute\_url }}”\>All Topics\</a\>  
\</nav\>

`

Just change the selectors below to what you need. In my case both of them were the same.

`

$( document ).ready( function() {  
$(‘a.blog-filter-option-link’).click(function(event) {  
event.preventDefault();  
console.log(‘Clicked’);  
$(‘[selector to where you want this loaded]’).load($(this).attr(‘href’) + ’ [selector of section you want loaded]');

});  
});

`

Hope this helps.

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [May 10, 2022, 6:19pm UTC](https://community.hubspot.com/t/set-up-a-custom-filter-for-blog-posts-by-topic/37751/10 "2022-05-10T18:19:23Z")

</div>

Hey, @IWebteam thanks for sharing your solution!

– Jaycee