[Resolved] Distance filter not working; causes reloading of filter controls

[Author]

Posts

[ericE-4]

On this page: hidden link I have added a distance filter below a series of checkbox filters. All filters control the pins displayed on the map to the right. One of the pins is just outside the town of Yakutat, AK, USA.

If you enter "Yakutat, AK, USA" into the location (map centre) field (keep the default 25 miles radius):

- My initialization code inside

jQuery( document ).ready( function( $ ) {});

executes, which messes up the styling for the checkboxes—it should only run when the page first loads
- The map is displayed without the correct filter applied
- The "location" field is empty

Why is this happening, and how do I get it to work properly?

[Christian Cox]

My initialization code inside (the document ready event callback) executes, which messes up the styling for the checkboxes—it should only run when the page first loads

Hi, when a filter is submitted in a View using AJAX search, the AJAX response includes not only the search results but also the HTML markup for a fresh new set of filters. The filters that were already in place in the DOM (and initialized by your custom code when the page loads) are replaced with the new HTML markup. This means that the visual modifications that were made upon page load are no longer applied - the fresh new HTML markup is based on the original filters. In other words, I don't think the problem is that the document ready event is triggered multiple times. I think the problem is that the initialization scripts you run upon page load should be run again after a filter is modified.

To test that theory, I submitted the Yakutat location and waited for results. Now the checkboxes are hidden and the labels are dark. I copied this code from your page initialization scripts:

$(".search-filter-checkbox").each(function() {
  $(this).parent().before(this);
});

I updated the jQuery namespace like so:

jQuery(".search-filter-checkbox").each(function() {
  jQuery(this).parent().before(this);
});

Then I pasted that code in the browser console and executed it. Now the checkboxes are visible again (see cbs.png). So I'm fairly confident this is why things don't seem right visually after a filter change - the initialization script(s) must be run again. You can use the Frontend Events button in the View editor screen to generate an event hook that will be triggered after the search form filters have been updated (fes.png and sf-updated.png).

- The map is displayed without the correct filter applied
I'm not able to see a map at all, maybe something changed since you submitted the ticket? If I look in the JavaScript console there's an error about the jQuery draggable:

:formatted:3:4162 Uncaught TypeError: $(...).draggable is not a function
    at new ResizableColumnLayout (:formatted:3:4162)
    at :formatted:3:4273

Can

[ericE-4]

Hi Christian,

The JS error with Jquery draggable has been fixed (it was missing a depency). It has nothing to do with this issue.

<quote>
Hi, when a filter is submitted in a View using AJAX search, the AJAX response includes not only the search results but also the HTML markup for a fresh new set of filters.
</quote>

Well...hmmm...this is contrary to what Waqar told me, who said that as long as I set up the view by selecting the option "Always show all values for inputs" the filter control HTML will not be regenerated each time a filter input changes.

The other thing is that since I've had by view set up this way, the filter controls stay static when changing any other filter control (try checking "Alaska").

Why is the HMTL markup being regenerated when I change the distance input...and how can I stop like and make it act like the other controls?

[ericE-4]

You won't be able to see the page or what I described above, because something has happened to cause the page to not even render anymore. I've created a separate ticket for that. If you want to help me with that one first, that would be awesome.

[ericE-4]

OK, that issue has been resolved and the page now renders again.

In the meantime, I've come to the conclusion that Toolset's queries are way too slow to have the filters set to "Update the View results every time an input changes" so I've switched it to "Update the View results only when clicking on the search button" and added a search button.

However unlike before, the "updating the view" spinner appears every time a filter input is changed. Furthermore, the Search button doesn't actually do anything when clicked.

And the distance input field still causes the entire filters HTML markup to be regenerated when any value is input (and without the search button being clicked).

[Christian Cox]

Well...hmmm...this is contrary to what Waqar told me, who said that as long as I set up the view by selecting the option "Always show all values for inputs" the filter control HTML will not be regenerated each time a filter input changes.
Normally this setting does have the effect Waqar described, yes, but I saw the DOM being replaced and incorrectly assumed you had chosen "only show available options for each input" intentionally. Sorry for the confusion, I did not mean to imply the behavior is impossible to change.

However unlike before, the "updating the view" spinner appears every time a filter input is changed. Furthermore, the Search button doesn't actually do anything when clicked.
Okay this sounds familiar. After examining the DOM in more detail, it seems this View has been split into filters and results: https://toolset.com/errata/toolset-maps-distance-search-location-input-cannot-be-used-when-the-views-is-displayed-in-split-mode/
Is your View split into separate filters and results using two separate View shortcodes, or by being placed in the page separately by two Elementor elements? If so, then this known issue could be the root cause of the problem you have experienced. It's a bug with only one known workaround - to combine the search results and filters in one output element. That often means you must add a considerable amount of page markup in the Output Editor panel to achieve any special design elements you would normally add with a page builder of some kind.

[ericE-4]

<quote>
Is your View split into separate filters and results using two separate View shortcodes, or by being placed in the page separately by two Elementor elements?
</quote>

Yes that's exactly what I have.

<quote>
That often means you must add a considerable amount of page markup in the Output Editor panel to achieve any special design elements you would normally add with a page builder of some kind.
</quote>

Indeed. That's a huge disappointment. Especially considering the bug has been known for quite some time.

[ericE-4]

I have removed the distance filter, but the "updating the view" spinner still appears every time a filter input is changed and the Search button still doesn't do anything when clicked.

[ericE-4]

I've figured out that the search button shortcode must be part of the search/filter code in the view...I had it outside of that placed in a div with the page builder. The documentation should contain this fact...it would save a lot of frustration and reduce your support load.

Anyway, it works now. I still have the problem with the spinner appearing after every change in value of a filter input. And of course the distance field does not work at all so I've had to remove it.

Would still really appreciate how to workaround the bug with spinner!

[ericE-4]

I have now added sorting controls, and this causes the same problem as the Distance filter does, so I figured since I will need to get this fixed for the sorting controls (those are not optional) I decided to add the distance filter back.

I've now got 4 separate problems that I'm hoping you can find fixes or workarounds for:

1) As I mentioned before, I manipulate the filter controls so I can make them look better and initialize the accordion control when the page loads. I use this code:

jQuery( document ).ready( function( $ ) {
	$(".accordion").on("click", ".heading", function() {
 		$(this).toggleClass("active").next().slideToggle(200);
 	});

    	$(".search-filter-checkbox").each(function(){
      		$(this).parent().before(this);
    	});

Without this code executing, the accordion doesn't work, the checkboxes are hidden and the labels are dark grey.

When I do any of the following: (enter a distance filter location, enter a distance filter value, change the sorting), the filter controls seems to re-initialize and revert to the way it is when the page loads (before the JS code above executes).

2) The "updating the view" spinner still appears every time a filter input (like a checkbox) is changed and the Search button still doesn't do anything when clicked. i have a feeling that this is related to 1) above.

3) In addition to entering a distance location causing the problem in 1) above, it also just doesn't work—meaning the posts in the view layout do not actually get filtered.

4) Not only does changing the sort order cause the problem in 1) above, changing the sort order has no effect on the order of posts in the view layout, and the selected radio button does not change.

I can provide admin access to this site if you want to inspect.

[Christian Cox]

Okay please provide login criteria here so I can take a closer look. I may need to use the Duplicator plugin to create a clone of the site so I'm not breaking the live site during testing.

[Christian Cox]

Okay I temporarily deactivated Search Page in the custom JS plugin so I can see what's going on here. It looks like the main issues are the splitting of View filters and results. That is the main reason for issues 1, 2, and 3. As a test, I placed the entire View in the sidebar widget and removed it from the Elementor Search template. Those problems were all resolved, so it looks like the issues with split Views are more pervasive than just those mentioned in the erratum post.

Problem 4, related to sorting, appears to be a results of this code in the Search Page custom JS file:

$("#sorting").prependTo("#grid-header");

DOM manipulation is breaking some functionality of the sorting system. If you comment out this line and adjust the CSS to show the sorting system, the radio buttons work more like I would expect.

[ericE-4]

So is the conclusion that the filters and results cannot be placed in separate DIVs? Or is it that Toolset Views are not compatible with Elementor?

In other words, is there any way for me to make this work without combining the filters and results and placing them in a non-Elementor container?

[Christian Cox]

So is the conclusion that the filters and results cannot be placed in separate DIVs? Or is it that Toolset Views are not compatible with Elementor?m
No, the conclusion is not exactly either of those statements so let me try to clarify. The filter update problems would occur even without Elementor involved, so this is not a compatibility issue with Elementor. To say that the problem occurs by placing the filters and results in separate divs is not entirely accurate either - you can add div tag wrappers in the View's Output Editor panel to separate the filters and results ([wpv-filter-meta-html] and [wpv-layout-meta-html]) without any inherent problem. The problem is in how the View is placed, or inserted, in the site contents. If you separate a View's filters and results by placing the View using two separate shortcodes, or separate widgets or separate blocks or separate whatever elements, then the filter update problems will occur. The View's filters and results must be inserted using one shortcode or one Elementor widget or one Block to prevent the filter update problems you have experienced.

[ericE-4]

OK...I had proceeded down this path because I was told by other support technicians (on two separate occasions) that it was possible to have filters and results displayed using separate shortcodes for them.

This has been a huge waste of time. It's unfortunate that your team doesn't work from a common set of knowledge.