[Resolved] Need to refresh map after changing filters using ajax search

[Author]

Posts

[JoshuaD7497]

Tell us what you are trying to do?

hidden link
I would like to use Ajax when filtering and displaying results, but it doesn't update the Google map (unless you refresh the whole page). Is there a way to achieve this?

Is there any documentation that you are following?
No

Is there a similar example that we can see?
No

What is the link to your site?

hidden link
Site access is available to Toolset Support (see previous two tickets).

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I couldn't view the actual page, because the access details from the previous tickets were not available.
( the access details are automatically removed from a ticket once it is resolved )

In general, you can include some custom script in the archive's "JS editor" to make the map refresh, when the AJAX pagination and search is completed:

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated', function( event, data ) {
    WPViews.view_addon_maps.reload_map('map-1');
});

Note: You'll replace "map-1" with the actual ID of the Map.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the admin access.

During testing on my website with a similar archive, I was able to make the automatic map refreshing work, by using the shortcodes for the map and the map markers.
( you can remove the custom script from my last message too, as it won't be needed )

1. In the archive, please replace the "Map" block with a "Fields and Text" block and include a shortcode for the map. For example:
( ref: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-render )

[wpv-map-render map_id="map-1" map_height="88vh"][/wpv-map-render]

2. Next, inside the container block added in the Archive's loop, you can include another "Fields and Text" block and add the shortcode for the map marker in it:
( ref: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-marker )

[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-map-location'][wpv-post-link][/wpv-map-marker]

In this example, I've included the [wpv-post-link] shortcode in the map marker's shortcode to show in the map marker's popup, but, you can show any information from the current post in the loop, using the respective shortcodes:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

[JoshuaD7497]

Hi Waqar,

It's a shame this couldn't work with the blocks. But no worries.

I've been working with my Cottages archive page, have replaced the map block with the shortcode, etc.

But now I'm not getting any map display at all. So still stuck I'm, afraid.
hidden link

Josh.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I checked the archive page and found these items which needed some adjustments:

1. In both new "Fields and Text" blocks, the shortcodes for the map and the map markers were added in the visual mode and not the HTML mode. I've added them both in the HTML mode and they're working now.
( screenshot: hidden link )

2. The "Fields and Text" block for the map marker's shortcode was added at the start of the archive and not inside the loop.
( screenshot: hidden link )

I've moved it inside the archive's loop block.
( screenshot: hidden link )

3. After these changes, the map and the map markers started showing correctly. However, some overlay styles from the Kadence blocks, started overlapping on the archive's results and map columns.

I've included some CSS code in the archive so that these columns are not affected by that overlay.
( screenshot: hidden link )

.wp-block-toolset-views-wpa-editor .kb-section-link-overlay {
    display:none;
}

[JoshuaD7497]

Thanks Waqar,

That all makes sense.

It looks good on the front end but when I edit the archive template for cottages, I'm seeing "This block contains unexpected or invalid content" on both the main containers. The Attempt Block Recovery buttons don't resolve anything.

[JoshuaD7497]

Waqar,

Further to my post yesterday, do you think I'll need to rebuild the archive page?
The blocks don't seem to be recoverable and there are no revisions to turn to.

It's not completely the end of the world as I have the Search page/view to use as a guide as this was using much the same format. I'd just have to try and do all the same things you did yesterday. But such a shame as it look perfect on the front-end!

It concerns me though. Although I've tried to use the Blocks interface with Toolset I seem to often end up switching to legacy solutions and getting crashes of blocks. Plus the code on the Fields and Text (the one which displays the cottage symbols) sometimes just changes when I save the page and haven't even edited it.

What do you think?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

During troubleshooting, I noticed that CSS code from point 3 of my last reply was no longer needed.

I've removed it and the blocks are loading correctly on the archive edit screen now.

Please check the archive and let me know if you face any difficulty in editing it.

[JoshuaD7497]

Thanks Waqar,

Yes, I've been able to edit the archive template fine since you removed the CSS tweaks. And I've been able to update it too. So all looks good.

I'm winding things up for Christmas now and will probably pick up on this again after Christmas. So unless you hear from me again, please assume all is well.

Thanks for your help and I hope you also have a happy holiday.

Best wishes,
Josh.