Forums › Forums › Search & Filter Pro › Scroll to results without refreshing
Tagged: ajax, bookmarkable
- This topic has 5 replies, 2 voices, and was last updated 3 years, 11 months ago by Trevor.
-
Anonymous(Private) November 13, 2020 at 12:46 am #266252
Hi,
First of all, thank you for the great plugin! Definitely makes my life a lot easier.
I have kind of an odd use case. I have a client who works for counties in the US. He wants to display just how many customers he has using a map of the United States, along with a list of every county.
Search & Filter Pro is working great–we have a list of all the counties with a filter by state. These are the settings we’re using on the Display Results tab:
-Load results using Ajax
-Make searches bookmarkable
-Only use Ajax on the results page
-Scroll window to Search Form on All
-Pagination Type: Infinite ScrollSo far, so good. The issue is with the map. The client wants the map displayed on the same page as the form. Clicking on a state should load the list of counties in that state, as displayed by S&F. So, clicking on California in the map loads /?_sft_state=california and the user is scrolled down to search results form. Perfect.
However, I’m hoping there’s a way to scroll the user down to the proper bookmarkable URL without reloading the page. Is that even possible?
Trevor(Private) November 13, 2020 at 8:36 am #266275I am not sure I understand, and it does sound complex to describe, but here goes …
Do you mean that, depending on the choice made, you would want to scroll to a different place on the page?
IF that is what you wanted, I am not sure that is possible without reloading the page, at least not directly from our plugin.
However, we do have a JavaScript event that triggers after our Ajax has finished (
sf:ajaxfinish
) which you could use to fire some JavaScript of your own making that works out where to scroll the page to. The code would look something like this:<script>(function ( $ ) { "use strict"; $(document).on("sf:ajaxfinish", ".searchandfilter", function(){ // call your script or function here }); }(jQuery));</script>
-
AuthorPosts