Support

Account

Home Forums Front-end Issues Ajax post query not showing map

Helping

Ajax post query not showing map

  • 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!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.