<script>
// Ajax call to get a single dealer
// fetch_individual_dealer() in functions.php
function fetch_individual_dealer_information(id) {
// We'll pass this variable to the PHP function fetch_dealers
var dealer_id = id;
var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
var mobile_dealer = $('#mobile-dealer');
var loader = $('.uil-spin-css-container');
loader.show();
// This does the ajax request
if (dealer_id) {
$.ajax({
url: ajaxurl,
data: {
'action':'fetch_individual_dealer',
'dealer_id' : dealer_id
},
success:function(data) {
// console.log(data);
loader.hide();
mobile_dealer.empty();
mobile_dealer.append(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
} else {
}
}
$("#dealers").change(function() {
fetch_individual_dealer_information(marker_id);
});
</script>
<div class='uil-spin-css-container'>
<div class='uil-spin-css'>
<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
</div>
</div>
<div id="mobile-dealer" class="visible-xs">
<article>
<div class="row">
<div class="col-xs-4"><img src="http://website.com/wp-content/uploads/2016/04/image-150x150.jpg" class="img-responsive"></div>
<div class="col-xs-8">
<h5>Outdoor World</h5>
<h6>Bunbury</h6>
<p>4 Halifax Road, Bunbury, WA, 6230<br>
<strong>Phone:</strong> 08 9725 6166</p>
</div>
</div>
<a href="https://www.google.com/maps?daddr=-33.358775,115.66869199999996" class="btn white">Get Directions</a>
<a href="http://website.com/blog/dealer/bunbury/" class="btn arrow black">Dealer Details</a>
</article>
</div>
In Functions.php
function fetch_individual_dealer() {
// The $_REQUEST contains all the data sent via ajax
if ( isset($_REQUEST) ) {
$dealer_id = $_REQUEST['dealer_id'];
$dealer_suburb = get_the_title($dealer_id);
$dealer_name = get_field('dealer_name', $dealer_id);
$dealer_phone = get_field('delaer_phone', $dealer_id);
$dealer_address = get_field('dealer_store_address', $dealer_id);
$dealer_image = get_field('featured_image', $dealer_id);
$dealer_image_thumbnail = $dealer_image['sizes']['thumbnail'];
$categories = get_the_terms( $post->ID, 'dealer_state' );
if ($dealer_image_thumbnail) {
$image_column = '<div class="col-xs-4"><img src="'.$dealer_image_thumbnail.'" class="img-responsive"></div>';
} else {
$image_column = '';
}
$html = '
<article>
<div class="row">
'.$image_column.'
<div class="col-xs-8">
<h5>'.$dealer_name.'</h5>
<h6>'.$dealer_suburb.'</h6>
<p>'.$dealer_address['address'].'<br>
<strong>Phone:</strong> '.$dealer_phone.'</p>
</div>
</div>
<a href="https://www.google.com/maps?daddr='.$dealer_address['lat'].','.$dealer_address['lng'].'" class="btn white">Get Directions</a>
<a href="'. get_permalink($dealer_id).'" class="btn arrow black">Dealer Details</a>
</article>
';
echo $html;
}
// Always die in functions echoing ajax content
wp_die();
}
add_action( 'wp_ajax_nopriv_fetch_individual_dealer', 'fetch_individual_dealer' );
add_action( 'wp_ajax_fetch_individual_dealer', 'fetch_individual_dealer' );