[Resolved] How to display filters (search form) separately from results (list of posts)

[Author]

Posts

[ericE-4]

I'm trying to add a custom search/filters to a div on a page, which is separate from the div which will hold the results or list of posts that updates based on the filters.

I found a past support ticket that was related (https://toolset.com/forums/topic/custom-search-not-working-when-i-separate-search-form-and-search-results/) and it mentions a shortcode "[wpv-form-view]" but I can find no documentation for that shortcode (no results when I search in your knowledge base).

I've created a view to show the a filter, see attached images. I've placed this view into the div I want on the page (using the Elementor Views widget)

The page renders without the filter, not even the <div class="form-group"> element is part of the HTML.

Why is the filter not appearing?
Where can i find documentation on the [wpv-form-view] shortcode?
What is the right way to display filters (search form) separately from results (list of posts)?

Page is here: hidden link

[ericE-4]

Can you help me out with something else...it must be something simple that I'm not doing correctly, although I've followed the documentation here: https://toolset.com/documentation/user-guides/display-on-google-maps/displaying-markers-on-google-maps/

I think I have a handle on creating the search controls (filters), and now I'm trying to display the results on a map. I've created the loop, and I am trying to display the layout portion of the view on my page with the shortcode you provided ([wpv-view name="slug-of-the-view" view_display="layout"]).

The map is present on the page, but it includes the inline style "visibility: hidden", so it of course can't be seen. See image 1. If I disable that style, the map seems fine (see image 2).

Why does the map have the "visibility: hidden" inline style?

[ericE-4]

I've now added some more filters (all checkboxes so far). If I manually override the "visibility: hidden" inline style so I can see the map, then start checking/unchecking filters, I notice that it has no effect on the markers shown on the map (i.e. the filters are not executing). Why?

The page: hidden link

[ericE-4]

I've figured out why both of these issues are happening...I had disabled the pagination script on the page. They are no longer happening now that I've enabled the script again. However, now that I've moved past that, I have some additional questions and problems. 🙁

I have placed 3 filters (filtering the custom fields "drive-in-or-fly-in", "prov-state" and "region") into a simple accordion control in the left sidebar. All the HTML for this accordion is part of the view output (view is "search-page-filters").

When I check the filter "Alaska", the map correctly changes to show only the posts with "prov-state" = "Alaska". That's good. However, the url changes to be hidden link

Why is "%5B%5D" following wpv-wpcf-prov-state? Those extra characters behind every filter will make for an extremely long url once I add all the filters I'm going to.
Why does it also add "&wpv_aux_current_post_id=79&wpv_view_count=2721-TCPID79"? How can I prevent that from being added?

What also happens is that the accordion closes automatically...it's almost like the entire page is being refreshed....but only the map should be refreshed with AJAX.
Furthermore, I can longer open the accordion control. Clicking the "Location" group just refreshes the page. When hovering over the Location group heading I can see "hidden link" is the link it will execute for some reason (see image 1)...how can I prevent that? In fact that same link has been added to every filter group heading (Location, Price, Fish Species, etc.). WTF?!

[ericE-4]

This is my view "Search and Pagination" code:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="elementor-element elementor-element-04dabcb filters-wrapper elementor-widget elementor-widget-accordion" data-element_type="widget" data-id="04dabcb" data-widget_type="accordion.default">
	<div class="elementor-widget-container">
		<div class="elementor-accordion" role="tablist">
			<div class="elementor-accordion-item">
				<div class="elementor-tab-title elementor-active" data-tab="1" role="tab">
					<span aria-hidden="true" class="elementor-accordion-icon elementor-accordion-icon-left">
						<span class="elementor-accordion-icon-closed"><i class="fal fa-chevron-down"></i></span>
						<span class="elementor-accordion-icon-opened"><i class="fal fa-chevron-right"></i></span>
					</span>
					<a data-wpel-link="internal" href="#"><i class="fal fa-location"></i><span class="filter-label">Location</span></a>
				</div>
				<div class="elementor-tab-content elementor-clearfix" data-tab="1" id="elementor-tab-content-5091" role="tabpanel">
                    <div class="form-group">
                        [wpv-control-postmeta field="wpcf-drive-in-or-fly-in" class="search-filter-checkbox" type="checkboxes" url_param="wpv-wpcf-drive-in-or-fly-in"]
                      	<hr/>
						[wpv-control-postmeta field="wpcf-prov-state" class="search-filter-checkbox" type="checkboxes" url_param="wpv-wpcf-prov-state"]
                      	[wpv-control-postmeta field="wpcf-region" class="search-filter-checkbox sub-region" type="checkboxes" url_param="wpv-wpcf-region"]
                    </div>
				</div>
			</div>
			<div class="elementor-accordion-item">
				<div class="elementor-tab-title" data-tab="2" role="tab">
					<span aria-hidden="true" class="elementor-accordion-icon elementor-accordion-icon-left">
						<span class="elementor-accordion-icon-closed"><i class="fal fa-chevron-down"></i></span>
						<span class="elementor-accordion-icon-opened"><i class="fal fa-chevron-right"></i></span>
					</span>
					<a data-wpel-link="internal" href=""><i class="far fa-dollar-sign"></i><span class="filter-label">Price</span></a>
				</div>
				<div class="elementor-tab-content elementor-clearfix" data-tab="2" id="elementor-tab-content-5092" role="tabpanel">
	/* PRICE FORM GOES HERE */
              	</div>
			</div>
			<div class="elementor-accordion-item">
				<div class="elementor-tab-title" data-tab="3" role="tab">
					<span aria-hidden="true" class="elementor-accordion-icon elementor-accordion-icon-left">
						<span class="elementor-accordion-icon-closed"><i class="fal fa-chevron-down"></i></span>
						<span class="elementor-accordion-icon-opened"><i class="fal fa-chevron-right"></i></span>
					</span>
					<a data-wpel-link="internal" href=""><i class="fal fa-fish"></i><span class="filter-label">Fish Species</span></a>
				</div>
				<div class="elementor-tab-content elementor-clearfix" data-tab="3" id="elementor-tab-content-5093" role="tabpanel">
	/* FISHING FORM GOES HERE */
				</div>
			</div>
			<div class="elementor-accordion-item">
				<div class="elementor-tab-title" data-tab="4" role="tab">
					<span aria-hidden="true" class="elementor-accordion-icon elementor-accordion-icon-left">
						<span class="elementor-accordion-icon-closed"><i class="fal fa-chevron-down"></i></span>
						<span class="elementor-accordion-icon-opened"><i class="fal fa-chevron-right"></i></span>
					</span>
					<a data-wpel-link="internal" href=""><i class="fal fa-suitcase"></i><span class="filter-label">Trip</span></a>
				</div>
				<div  class="elementor-tab-content elementor-clearfix" data-tab="4" id="elementor-tab-content-5094" role="tabpanel">
	/* TRIP FORM GOES HERE */
				</div>
			</div>
			<div class="elementor-accordion-item">
				<div class="elementor-tab-title" data-tab="5" role="tab">
					<span aria-hidden="true" class="elementor-accordion-icon elementor-accordion-icon-left">
						<span class="elementor-accordion-icon-closed"><i class="fal fa-chevron-down"></i></span>
						<span class="elementor-accordion-icon-opened"><i class="fal fa-chevron-right"></i></span>
					</span>
					<a data-wpel-link="internal" href=""><i class="fal fa-house-flood"></i><span class="filter-label">Lodge</span></a>
				</div>
				<div class="elementor-tab-content elementor-clearfix" data-tab="5" id="elementor-tab-content-5095" role="tabpanel">
	/* LODGE FORM GOES HERE */
				</div>
			</div>
		</div>
	</div>
</div>
[/wpv-filter-controls]
[wpv-filter-end]

[Waqar]

Hi Eric,

Thanks for writing back.

1. As discussed earlier, I've internally shared your feedback about the documentation related to showing view's search and results separately.

Will update you through this ticket, once there is some progress.

2. URL parameters:

The characters "%5B" and " %5D" represent the opening and closing square brackets "[" and "]" respectively, when URL encoding is used.
( ref: hidden link )

The structure "wpv-wpcf-prov-state[]=Alaska" means that this URL parameter can pass on more than one values ( i.e. an array ).

The other URL parameters ( e.g. "&wpv_aux_current_post_id=79&wpv_view_count=2721-TCPID79" ) are used as identifiers to understand which view was used for the search and from which page etc. These identifiers are needed so that multiple views can be used on a single page and likewise, the same view can be used on multiple pages.

Those URL parameters can't be turned off individually, but you can choose the "Do not adjust URLs after loading search results" option in the view's "Custom Search Settings" settings so that no URL parameters are appended into the URL.
( screenshot: hidden link )

3. Search form's accordion:

By default, the way AJAX update filter works in views, it reloads the search form, along with the results too. This is important so that the available form fields values can also be updated, based on the selection.

If you don't want the search form to reload with every update of AJAX results, you can select the option "Always show all values for inputs", in the same "Custom Search Settings" settings.
( screenshot: hidden link )

Any scripts like the Elementor's accordion script, which may be set to initialize on page reload, will not work after the related content/HTML has been reloaded through AJAX on the page.
( since the items with which original binding took place are no longer available and have been replaced by new ones )

Ref: https://stackoverflow.com/a/13767985

Note: You'll also find the fields in the "Custom Search Settings" settings, for when you need to attach script functions with different AJAX events.
( screenshot: hidden link )

I hope this helps and for future reference, please note that as per our support policy ( https://toolset.com/toolset-support-policy/ ), only one question or issue can be addressed through a single ticket.

You're welcome to open a new ticket for each new question or concern.

regards,
Waqar

[ericE-4]

My issue is resolved now. Thank you!