Reload wordpress php part with ajax

Question

Im using wordpress theme that has different parts like for example footer.php or header.php. What I want to do is reload one part of the whole page using jquery so that the whole page does not refresh. Below is my code with the php part that I want to reload and the jquery Im using.

Jquery code inside a php code block

<script type="text/javascript">
                jQuery(document).ready(function(){
                    var thedata = '.json_encode($this->query_args).';
                    jQuery( ".facetwp-page" ).click(function() {


                        jQuery.ajax({
                            type: "post",
                            url:  "'.admin_url("admin-ajax.php").'",
                            data: { "action" : "query_for_map", "mydata" : thedata },
                            success: function(response, data){
                                console.log(response);
                                console.log(data);
                                jQuery("#map-head").load("'.get_template_directory_uri().'/banners/map_based_banner.php");
                                google.maps.event.trigger(map, "resize");

                            }
                        });
                    });
                });

                </script>

php template part to be reloaded

<?php
session_start();
include('/home/javy1103/public_html/wp-blog-header.php');
global $paged;
$properties_for_map = array(
                        'post_type' => 'property',
                        'posts_per_page' => 12,
                        'paged' => $paged
                    );

if( is_page_template('template-search.php') || is_page_template('template-search-sidebar.php') ){

    /* Apply Search Filter */
    $properties_for_map = apply_filters( 'real_homes_search_parameters', $properties_for_map );

}elseif(is_page_template('template-home.php')){

    /* Apply Homepage Properties Filter */
    $properties_for_map = apply_filters( 'real_homes_homepage_properties', $properties_for_map );

}elseif(is_tax()){

    global $wp_query;
    /* Taxonomy Query */
    $properties_for_map['tax_query'] = array(
                                            array(
                                                'taxonomy' => $wp_query->query_vars['taxonomy'],
                                                'field' => 'slug',
                                                'terms' => $wp_query->query_vars['term']
                                            )
                                        );

}

function query_for_map() {

return json_decode($_POST['mydata']);

}
add_action('wp_ajax_query_for_map', 'query_for_map');
add_action('wp_ajax_nopriv_query_for_map', 'query_for_map');

$mapdata = $_SESSION['queryMap'];

$properties_for_map_query = new WP_Query( $mapdata );


$properties_data = array();

if ( $properties_for_map_query->have_posts() ) :

    while ( $properties_for_map_query->have_posts() ) :

        $properties_for_map_query->the_post();

        $current_prop_array = array();

        /* Property Title */
        $current_prop_array['title'] = get_the_title();

        /* Property Price */
        $current_prop_array['price'] = get_property_price();

        /* Property Location */
        $property_location = get_post_meta($post->ID,'REAL_HOMES_property_location',true);
        if(!empty($property_location)){
            $lat_lng = explode(',',$property_location);
            $current_prop_array['lat'] = $lat_lng[0];
            $current_prop_array['lng'] = $lat_lng[1];
        }

        /* Property Thumbnail */
        if(has_post_thumbnail()){
            $image_id = get_post_thumbnail_id();
            $image_attributes = wp_get_attachment_image_src( $image_id, 'property-thumb-image' );
            if(!empty($image_attributes[0])){
                $current_prop_array['thumb'] = $image_attributes[0];
            }
        }

        /* Property Title */
        $current_prop_array['url'] = get_permalink();

        /* Property Map Icon Based on Property Type */
        $property_type_slug = 'single-family-home'; // Default Icon Slug

        $type_terms = get_the_terms( $post->ID,"property-type" );
        if(!empty($type_terms)){
            foreach($type_terms as $typ_trm){
                $property_type_slug = $typ_trm->slug;
                break;
            }
        }

        if(file_exists(get_template_directory().'/images/map/'.$property_type_slug.'-map-icon.png')){
            $current_prop_array['icon'] = get_template_directory_uri().'/images/map/'.$property_type_slug.'-map-icon.png';
        }else{
            $current_prop_array['icon'] = get_template_directory_uri().'/images/map/single-family-home-map-icon.png';
        }

        $properties_data[] = $current_prop_array;
    endwhile;
    wp_reset_query();

?>

Answer 1

You can generate all server side(PHP) work without refreshing page by Ajax, Then you can use it in HTML, you can't replace PHP of your page. ex: If you want some data from database then you can send an ajax request to PHP file then fetch the data and get the result, then show it in HTML.