[Resolved] Map not updating when using a nested view via AJAX search

[Author]

Posts

[SteBlood]

I have an archive page.

Archive page has a search and shows the posts based on input.
I also have/had a map that will refresh along with AJAX on the page. BUT!!!
The map will only show what is in the view.

When paginated, the map only shows items within that 'page'.

I've created a second view to show just the map on.
I've copied over all the same search filters etc.
Added the map view to my archive page.

When using the search, the map doesn't update without a full page refresh.

I've tried everything? the closest I got was setting the archive page on;
https://toolset.com/wp-content/uploads/tmp/screenshot_1_6.png

AND

the map view on
https://toolset.com/wp-content/uploads/tmp/screenshot_2_3.png

However, for the map to update, I still need to refresh.

NOW, you may think, why not just use a page refresh?

I am happy to do this, however, when I use the full page reset, the 'sort' function stops working.

This is really racking my brain.
I understand that because we're using multiple views the page has to reset, but as I previously mentioned, that doesn't bother me apart from 'Sort' stops working.

[Nigel]

Let me get this right before trying to reproduce the problem and check what does and does not work.

You have an archive which includes search filters, pagination, and some specific ordering setting.

You want to include a map, but if the map is part of the archive (i.e. uses the same query as the archive) then it can only ever display markers from the current page of results.

To be able to show all results on the map while only displaying a page of results in the archive, you add a View to the archive to display the map. The View includes the same filters as the archive (so the map responds when people apply search criteria) without reproducing the filter controls (which are output by the archive), i.e. it listens to the same URL parameters as the archive filters.

Because of this, necessarily, updates must be via page refresh rather than via ajax.

This works, except for ordering? Do you mean the archive includes front-end ordering controls (rather than a fixed ordering setting), and it is these ordering controls that don't work?

In which case, do they work if the View with the Map is removed (i.e. that is a red herring)?

The pagination is set to work via page refresh or ajax?

[SteBlood]

You have an archive which includes search filters, pagination, and some specific ordering setting.

Correct

You want to include a map, but if the map is part of the archive (i.e. uses the same query as the archive) then it can only ever display markers from the current page of results.

Correct

To be able to show all results on the map while only displaying a page of results in the archive, you add a View to the archive to display the map. The View includes the same filters as the archive (so the map responds when people apply search criteria) without reproducing the filter controls (which are output by the archive), i.e. it listens to the same URL parameters as the archive filters.

Correct

Because of this, necessarily, updates must be via page refresh rather than via ajax.

Yes, I believe so

This works, except for ordering? Do you mean the archive includes front-end ordering controls (rather than a fixed ordering setting), and it is these ordering controls that don't work?

So, ordering only seems to work on a AJAX. Wheneve the page refreshes, the sorting controls go back to their default form.
Whereas on AJAX, they'll work flawlessly.

The pagination is set to work via page refresh or ajax?

I set this depending on the options I choose in the original screenshots.
https://toolset.com/wp-content/uploads/tmp/screenshot_1_6.png
https://toolset.com/wp-content/uploads/tmp/screenshot_2_3.png

I think I should mention the following;

In my Archive page, the code looks like the following;

Loop Editor

[wpv-layout-start]
[wpv-items-found][wpv-pager-archive-nav-links output="bootstrap" previous_next_links="true"]<br />Viewing <span class="pinkview"><strong>[wpv-found-count]</strong></span> Holiday Homes
	<!-- wpv-loop-start -->
	<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-6">[wpv-post-body view_template="loop-item-in-search-holiday-homes"]</div>
		[wpv-item index=other]
			<div class="col-md-6">[wpv-post-body view_template="loop-item-in-search-holiday-homes"]</div>
		[wpv-item index=2]
			<div class="col-md-6">[wpv-post-body view_template="loop-item-in-search-holiday-homes"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-6"></div>
		[wpv-item index=pad-last]
			<div class="col-md-6"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
<span class="right">[wpv-pager-archive-nav-links output="bootstrap" previous_next_links="true"]</span>
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Output Editor

[wpv-view name="map-on-holiday-home-archive"]<br />
<div class="row">
  <div class="col-md-3"><h3 class="pink">Search:</h3>[wpv-filter-meta-html]</div>
	<div class="col-md-9"><span class="pink">Sort: [wpv-sort-orderby type="select" options="post_date,field-wpcf-was-sale-price,field-wpcf-sale-price" label_for_post_date="Published" label_for_field-wpcf-was-sale-price="Was Price" label_for_field-wpcf-sale-price="Now Price" orderby_as_numeric_for="field-wpcf-was-sale-price,field-wpcf-sale-price" orderby_ascending_for="post_date,field-wpcf-was-sale-price,field-wpcf-sale-price"][wpv-sort-order type="select" options="desc,asc" label_for_asc="Ascending" label_for_desc="Descending" label_asc_for_post_date="Oldest" label_desc_for_post_date="Newest" label_asc_for_field-wpcf-was-sale-price="Lo - Hi" label_desc_for_field-wpcf-was-sale-price="Hi - Lo" label_asc_for_field-wpcf-sale-price="Lo - Hi" label_desc_for_field-wpcf-sale-price="Hi - Lo"]</span><span class="right">[wpv-pager-archive-nav-links output="bootstrap" previous_next_links="true"]</span><br />[wpv-layout-meta-html]</div>
</div>

My map view looks like;

Loop Editor

[wpv-layout-start][wpv-map-render map_id="map-6" map_height="450px" spiderfy="on" marker_icon="//lunaprivatesales.com/wp-content/plugins/toolset-maps/resources/images/markers/Home.png"][/wpv-map-render]<br />
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>[wpv-map-marker map_id='map-6' marker_id='marker-5' marker_title='[wpv-post-taxonomy type="make" format="name"] [types field='model'][/types]' marker_field='wpcf-address-location-input' item='@holiday-park-holiday-home.parent']<a href="[wpv-post-url]" target="_blank">[wpv-post-taxonomy type="make" format="name"] [types field='model'][/types]</a><br />
              [wpv-post-taxonomy type="length" format="name"]x[wpv-post-taxonomy type="width" format="name"]<br />
              [wpv-post-taxonomy type="bedroom" format="name"] Bed<br /><br />
              [wpv-post-taxonomy type="window" format="name"]<br />
          [wpv-post-taxonomy type="heating" format="name"][/wpv-map-marker]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

After looking at my search filters on the Archive page, I noticed and 'Deckings' has no example. (https://toolset.com/wp-content/uploads/tmp/deckingsno_example.png)
When clicking 'Edit' on the query filter, decking does not show, so I can't 'remove' and re-apply... (https://toolset.com/wp-content/uploads/tmp/deckingsnotvisible.png)

So I removed the filter from search and allowed toolset to give me the

This View has some query filters that are missing from the form. Maybe you have removed them:
Filter by decking
Can they also be removed from the query filtering?

The pressing "Yes(recommended)" - removing the query.

However, upon adding that filter again, the same thing happens as in the screenshots.

I have no idea if this is anything to do with the problem.

I know that the decking filter works regardless of the example and it showing up in the query filter editor.

Bit long winded this one.

Thanks Nigel!

Steve

[Nigel]

OK Steve

Just looking at the details you shared, I think the problem is that you've extracted the shortcode for the ordering controls outside of the Search and Pagination section and added them to the Output Editor. But for them to work correctly they need to be within the wpv-filter-controls shortcode (i.e. the section that gets output by the wpv-filter-meta-html shortcode in the Output Editor), not outside of it.

Can you check that? Move the ordering controls shortcode in the main part of the Search and Pagination section.

Does it then work as expected?

If it doesn't, I'll set up a test site with something similar to investigate further.

[SteBlood]

Nigel,

It seems you're right. However, this doesn't leave me much choice when it comes to styling of the page.

Take a look at where I am trying to place my sort controls compared to where it's suggested I should have them.
https://toolset.com/wp-content/uploads/tmp/view_i_want.png - what I want
https://toolset.com/wp-content/uploads/tmp/suggested_view.png - What is suggested

Do you have any other suggestions?

[Nigel]

Without checking (you have a site where you can check) I'm not sure whether the sorting controls would also work inside the Loop Editor section (so inside the wpv-items-found shortcode, but not inside the loop itself).

It was certainly a problem in your initial setup that they were in neither the filter section nor the loop section.

Try moving them to the Loop Editor after the wpv-items-found shortcode and see if that works.

If it doesn't then for the sorting controls you will have to include them with the filters, I'm afraid, and you'd likely need some fairly creative CSS to relocate them as desired.

[SteBlood]

Putting the filter controls into the Loop editor doesn't solve my problem either

I think, what I'll do is put back the map that was on there working with the AJAX filter, then use my view map to show all property on a seperate page, so not to confuse people.

I really don't like having to compromise on the look and feel of the experience I've created.

Thank you anyway, Nigel