Support

Account

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

Helping

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?

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.