topic Re: Prevent page from refreshing when filtering HubDB in CMS Development

Prevent page from refreshing when filtering HubDB

ckingg — Wed, 14 Apr 2021 18:46:13 GMT

I'm working on a page that has 4 filters. It works just fine for filtering as is and it technically auto filters as you select the options in the avialbe dropdowns and checkboxes.

However, the issue is that the page refreshes after every filter selection in a checkbox or dropdown. I don't want the page to refresh as users are filtering.

I know I could use Ajax for this but I have no idea how to get started with that or how to use it with HubDB. I looked at the docs and it shows filters, functions, etc., but there are not tutorials or getting started setup guides that I've found.

If anyone could help with this or can point me to a tutorial of some sort, I would appreciate it.

Re: Prevent page from refreshing when filtering HubDB

dennisedson — Thu, 15 Apr 2021 14:27:47 GMT

@ckingg

If you want a prebuilt solution, you could look into something like Isotope or Mixitup.

@Kevin-C could probably offer some advice here as well. Might be a cool tutorial we can create!

Re: Prevent page from refreshing when filtering HubDB

Kevin-C — Thu, 15 Apr 2021 14:41:20 GMT

Thanks @dennisedson you know this is my favorite hubspot topic!

Hey @ckingg

You could prevent the page refresh on the form change, store the selected filters, on a click append them to the URL using a query param, and then submit the new URL.

The template would also need the HUBL to loop through the filters from the query_dict to get the correct data.

Busy week, but if I can I'll follow up with some code.

Re: Prevent page from refreshing when filtering HubDB

ckingg — Fri, 16 Apr 2021 13:44:08 GMT

@dennisedson @Kevin-C Thanks for the replies! I endedup going with Isotope and that seems to be working alright. However, an Ajax tutoriol would be helpful for futute projects!

Re: Prevent page from refreshing when filtering HubDB

ramanverma2005 — Mon, 10 Jan 2022 08:23:54 GMT

Hi @Kevin-C but isotope filter the records from the showed records only not from all the records I don't want to load all the records but filter should be working with all records along with load more options and copepen code will be great thanks in advance

Re: Prevent page from refreshing when filtering HubDB

sanyog — Wed, 11 Dec 2024 10:59:16 GMT

Would you please follow up on this with some code?