Filtering HubDB elements with HTML Checkboxes - follow up

[FedeColap]

Howdy Community,

I understand there is a previous post for the same issue (

https://community.hubspot.com/t5/CMS-Development/Filtering-HubDB-elements-with-HTML-Checkboxes/m-p/2... ) but I don't believe a solution has been found. 

I have tried many options, but figured some help would get me going. My thoughts have been 2:

   1) try to set the filters each time I make a query to HubDB (similarly to the famous Real Estate tutorial, and set in the aforementioned post) or 

   2) make only one giant query to retrieve the data from HubDb and then filter them (similarly to React).

The first method is easier said than done, I have though about entering a "submit button" to submit all the checked boxes at once, but the line

     `{% set typequery = typequery ~ "&type="~request.query_dict.type|urlencode %}`

would give me a URL like this:

     `?type=1&type=4&topic=1&topic=2`,

which does not work. Looking around I have found that a correct URL should be

     `?type=1+4&topic=1+2`

but I am not sure how to get to that uRL encoding. 

The second method has its own challenges. My line of thought was this:

first, in the JS panel create an empty array;

second, `document.querySelectorAll(`input[name="${name}"]:checked`)` and push them into the array;

third, display each element of the array, from the HTML/hubl panel. 

Unfortunately, I have not figured out yet how to fire a function and use a variable from the JS panel to the HTML/hubl panel. 

Any help or suggestion is greatly appreciated! 

[prosa · Accepted solution]

Hi there, I would recommend that you use Hubl to filter the db and set it to a js variable inside of a script tag. then use your js section to work with it. using react you can pull that data using window.VAR

[Kevin-C · Accepted solution]

Thanks @sharonlicari  and Hello @FedeColap 

So i've got a rather ellegant (if i do say so myself) solution for multiple checkbox filter with hubDB. But to be honest I'm not decided on releasing it as a paid article or free… shoot me a DM maybe we can work something out.

But anyway I can give you a few pointers.

I would get, build, and submit the URL with JS/jQuery on the front end. I always feel more comforable in JS over hubl/jinja.

[prosa · Accepted solution]

Hi there, I would recommend that you use Hubl to filter the db and set it to a js variable inside of a script tag. then use your js section to work with it. using react you can pull that data using window.VAR

[sharonlicari]

Hey @FedeColap 

Thank you for the information provided. I'll tag a few experts 

Hey @Kevin-C @prosa @Anton   do you have any thoughts you'd like to share with @FedeColap 

Thank you

Sharon

[FedeColap]

Hi @sharonlicari thanks for giving a thought and calling @Kevin-C  and @prosa  on this. For the records, since i found still challenging building the actual query to send as a get request, I ended up displaying the whole HubDB table at the beginning, and then working in JS/jQuery to hide and show results, so no queries each time the 2 filters are combined. 

Thank you for the suggestions, have a great day!