Ajax post query not showing map

• rudtek

• March 31, 2020 at 10:09 am

I’m querying my posts through js with a filter form. When the posts load on the front it shows a blank map box with no details. I believe its because the field is initally hidden where the map will be.

Here is my js:

$ = jQuery;

$("#reset_form").click(function(){
mafs.find("ul").empty();
});

  
var mafs = $("#rt-ajax-filter-search"); 
var mafsForm = mafs.find("form"); 
  
mafsForm.submit(function(e){
    e.preventDefault(); 
  
	if(mafsForm.find("#search").val().length !== 0) {
		var search = mafsForm.find("#search").val();
	}
	if(mafsForm.find("#metro_area").val().length !== 0) {
		var metro_area = mafsForm.find("#metro_area").val();
	}
	if(mafsForm.find("#specialty").val().length !== 0) {
		var specialty = mafsForm.find("#specialty").val();
	}
	if(mafsForm.find("#city").val().length !== 0) {
		var city = mafsForm.find("#city").val();
	}
	if(mafsForm.find("#state").val().length !== 0) {
		var state = mafsForm.find("#state").val();
	}
	  
	var data = {
		action : "rt_ajax_filter_search",
		search : search,
		city : city,
		state : state,
		metro_area : metro_area,
		specialty : specialty,
	} 

	$.ajax({
        url : ajax_url,
        data : data,
        success : function(response) {
            mafs.find("ul").empty();
            if(response) {
                for(var i = 0 ;  i < response.length ; i++) {
                     var html  = "<li id='provider-" + response[i].id + "'>";
                         html +=   response[i].map;
                         html += "      <div class='provider-info'>";
                         html += "          <h4>" + response[i].title + "</h4>";
                         html += "          <span>" + response[i].address + "</span>";
                         html += "          <span>" + response[i].phone + "</span>";
                         html += "          <span>Metro Area(s): " + response[i].metro_area + "</span>";
                         html += "          <span>Qualification(s): " + response[i].qualification + "</span>";
                         html += "          <span>Speciality: " + response[i].specialty + "</span>";
                         html += "      </div>";
                         html += "</li>";
                     mafs.find("ul").append(html);
                }
            } else {
                var html  = "<li class='no-result'>No matching Service Providers found. Try a different filter or search keyword.</li>";
                mafs.find("ul").append(html);
            }
        } 
    });
});

so I think I need to trigger a resize based on this, but I don’t know how.

I tried adding acf.do_action('show', $('#ajax_filter_search_results'));

but i get a reference error: ReferenceError: acf is not defined

Thanks!

• rudtek

• May 19, 2020 at 8:56 am

any ideas?