Prevent page from refreshing when filtering HubDB

[ckingg]

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. 

[ramanverma2005]

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

[ckingg · Accepted solution]

@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! 

[Kevin-C]

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.

[dennisedson]

@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!