Load Ajax data before results load

  • Resolved Ramakrishna

    (@ramakrishna_nyros)


    6 years, 11 months ago

    Hi All,

    I have issue with ajax in my site.

    In theme folder created one file called archive-doctors.php

    In this page displaying all doctors created in admin. The doctor has custom taxonomies called location and specialty.So in front-end showing these dependent taxonomy select box filters.

    Up to here fine. Now I want get current location(by asking users to allow current location) and show that location results only and in location filter select box set this value.To do this I used googlemaps api to get current location.And sending this location value to php by using ajax.

    JS in archive-doctors.php

    <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
	var loc = '';
	var ploc = '';
    if(!!navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder;
        geocoder.geocode({ 'location': {lat:position.coords.latitude,lng:position.coords.longitude}}, function(results, status){
        	if (status === 'OK'){
        		 if(results[0]){
        		 	loc = results[0].address_components[2].long_name;
        		 	ploc = results[0].address_components[3].long_name;
        		 }
        	}
        	var data = { 'action': 'sf_get_current_loc', 'ploc': ploc, 'loc':loc };
    		jQuery.ajax({
    			    type:'post',
    			    data:{action:'sf_get_current_loc','ploc': ploc,'loc':loc},
    			    url:ajaxurl,
    			    success: function(data){}
    				}); 
  		    });
        });        
    }	
</script>

    functions.php 

    add_action( 'wp_ajax_nopriv_sf_get_current_loc','sf_get_current_loc');
add_action( 'wp_ajax_sf_get_current_loc','sf_get_current_loc');

function sf_get_current_loc(){
$my_query = new WP_Query( array('cur_loc' => $_POST['loc'],'cur_ploc' => 
wp_die();
}

    Now I am using pre_get_posts action to get above set values to filter result by post__in 

    add_action('pre_get_posts', 'cur_location_filter');
function cur_location_filter($query) {
$post_ids = get post id by location
  if (!is_admin() && $query->is_main_query()) {
    $query->set('post__in', array($post_ids));
  }
}

    But here first pre_get_posts loaded and then ajax function loading.So in query loc and ploc is not available

    How to load ajax as first request of page ? Please help

    • This topic was modified 6 years, 11 months ago by Ramakrishna.
Viewing 3 replies - 1 through 3 (of 3 total)

  • You should move the jquery Ajax inside the conditional block if(results[0]) to access loc and ploc, else they would still be empty since the request is asynchronous and the ajax load even before the google api responds with a valid output.

    Moderator bcworkz

    (@bcworkz)

    Raja makes a good point, but it will not solve the lack of data in pre_get_posts. Pre_get_posts is PHP running server side. The maps API is JavaScript running client side. JS must always be after PHP. What you need to do is initially serve the page with no posts at all (unless the user location data that was previously saved is available). Part of your Ajax routine could be to fetch location based posts that are returned to the Ajax call. Your jQuery success script can then insert the returned posts in the current page’s DOM.

    It’s clearly going to take time to do all of that. Serving a page with no posts doesn’t look good. I’d advise you to serve the initial page with some sort of message like “Finding doctors close to you…”, perhaps with some sort of spinner GIF. This would all be replaced with posts once they are available.

    Thread Starter Ramakrishna

    (@ramakrishna_nyros)

    Raja and bcworkz Thanks for your reply. I solved by trigger onchange event for select box after map location received.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Load Ajax data before results load’ is closed to new replies.