[Resolved] Reload View after map changed_center

[Author]

Posts

[andyK-6]

Tell us what you are trying to do?
I try to reload the view with ajax after the map center is changed.

Is there any documentation that you are following?
yes: https://toolset.com/forums/topic/ajax-filtering-with-jquery-call-ajax-filtering-with-jquery/
and others...

What is the link to your site?
hidden link

I have this code, all is working exept the trigger at the end!

jQuery( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
    var i = 0;//first time not
    var map = WPViews.view_addon_maps.get_map('map-1');

	map.addListener('idle', function() {
        if(i){
          	jQuery('#toolset-maps-distance-center').val(map.getCenter().lat() + ',' + map.getCenter().lng());
          	jQuery('#toolset-maps-distance-value').val(getBoundsRadius(map.getBounds()));
		//alert('Center: ' + map.getCenter() + '\nZoom: ' + map.getZoom()+ '\nRadius: ' + getBoundsRadius(map.getBounds()));
          
          	var fil = jQuery("form[name='wpv-filter-336-TCPID93']");
		var view_number = fil.data( 'viewnumber' );
                jQuery('document').trigger('js_event_wpv_parametric_search_triggered', [ { view_unique_id: view_number, form: fil, force_form_update: false, force_results_update: true } ] );
		}
		i=1;
        });
});

function getBoundsRadius(bounds){
  // r = radius of the earth in km
  var r = 6378.8
  // degrees to radians (divide by 57.2958)
  var ne_lat = bounds.getNorthEast().lat() / 57.2958
  var ne_lng = bounds.getNorthEast().lng() / 57.2958
  var c_lat = bounds.getCenter().lat() / 57.2958
  var c_lng = bounds.getCenter().lng() / 57.2958
  // distance = circle radius from center to Northeast corner of bounds
  var r_km = r * Math.acos(
    Math.sin(c_lat) * Math.sin(ne_lat) + 
    Math.cos(c_lat) * Math.cos(ne_lat) * Math.cos(ne_lng - c_lng)
    )
  return r_km
}

[Christian Cox]

It appears the form is configured so that clicking "Submit" is required to update the form, and the page will reload. So you can simply submit the form at any time to trigger an update:

jQuery('form[name="wpv-filter-336-TCPID93"]').submit();

[andyK-6]

This reload's the Page.

I need a solution with ajax!

[Christian Cox]

First you must edit this View and set it to perform AJAX updates. Look for the Custom Search panel in the View Editor screen. If you cannot find this panel, click "Screen Options" in the top right corner of the editor screen. You can enable the Custom Search panel here. Then scroll down to the Custom Search panel and select the option to update the View with AJAX whenever any input is changed.

Then to trigger an AJAX update programmatically, you can throw a generic 'change' event on any filter element with the class "js-wpv-filter-trigger", something like:

jQuery(".js-wpv-filter-trigger:first").trigger('change');

That should automatically create the correct event payload and trigger the appropriate updates.

[andyK-6]

Thanks