I have created two JSON objects inside my functions.php ($result & $crumb)when I look at my AJAX URL both arrays are there, but when it is passed to my js file which handles the JSON something goes wrong and the error function for AJAX is fired. Why is this happening? is it because of how I have set the data in my AJAX function?
jQuery(function($){
$('#filters').submit(function(e){
e.preventDefault();
var filter = $('#filters');
var root_dir = document.location.origin;
$.ajax({
url: ajax_url,
data: filter.serializeArray(), // form data
dataType: 'json',
beforeSend:function(xhr){
$('#response').html("\
<div id='property_preloader'>\
<div id='gif'>\
<img src='http://dev.domain.co.uk/wp-content/themes/dist/imgs/preloader.gif' alt='Preloader Icon'>\
</div>\
</div>"
);
},
success:function(response){
$('#response').empty();
for(var i = 0; i < response.length; i++){
var status = response[i].status;
var flash_url;
if(response[i].status == "For Sale"){
flash_url = root_dir + '/wp-content/themes/dist/imgs/forsale.svg';
}else if(response[i].status == "Sold"){
flash_url = root_dir + '/wp-content/themes/dist/imgs/sold.svg';
}else{
flash_url = root_dir + '/wp-content/themes/dist/imgs/sstc.svg';
}
var html =""+
"<div class='col-sm-6 col-md-4 col-lg-3 post'>" +
"<div class='shadowwrapper2'>" +
"<a href='" + response[i].permalink + "'>" +
"<div class='propertywrapper'>" +
"<img class='img-fluid gal_imgs' src='" + response[i].image + "' alt='alt'/>" +
"<span class='second_flash'>" + response[i].second_flash + "</span>" +
"</div>" +
"<div class='cornerflash'><img src='" + flash_url + "' alt='corner flash'></div>" +
"<div class='propertyinfo'>" +
"<div class='row m-0'>" +
"<div class='col-6 p-0 mt-2'>" + response[i].property_type + "</div>" +
"<div class='col-6 p-0 mt-2'>" + response[i].bedrooms + " bedrooms</div>" +
"</div>" +
"</div>" +
"<div class='streetpricewrapper'>" +
"<p class='streetname'>" + response[i].street + ", " + response[i].town + "</p>" +
"<p class='price'>£" + response[i].price + "</p>" +
"</div>" +
"</a>" +
"</div>" +
"</div>";
$('#response').append(html);
}
post_count();
},
error: function(XMLHttpRequest, textStatus, errorThrown){
var html = "<div class='col-12'><p>Sorry we found no results for your search. Please try widen your search</p></div>";
$('#response').html(html);
}
});
});
});
add_action('wp_ajax_soldfilter', 'sold_filter');
add_action('wp_ajax_nopriv_soldfilter', 'sold_filter');
function sold_filter(){
$posts = array(
'posts_per_page' => -1,
'post_type' => 'property',
'orderby' => 'date',
'meta_key' => 'property_status',
'meta_value' => array('Sold', 'SSTC'),
'compare' => 'IN'
);
$posts['meta_query'] = array( 'relation' => 'AND' );
// price filtering
if($_GET['min_price'] && !empty($_GET['min_price'])){
$min_price = $_GET['min_price'];
}else{
$min_price = 0;
}
if($_GET['max_price'] && !empty($_GET['max_price'])){
$max_price = $_GET['max_price'];
}else{
$max_price = 10000000;
}
$posts['meta_query'][] = array(
'key' => 'property_price',
'type' => 'NUMERIC',
'value' => array($min_price, $max_price),
'compare' => 'BETWEEN'
);
// bed filtering
if($_GET['min_beds'] && !empty($_GET['min_beds'])){
$min_beds = $_GET['min_beds'];
}else{
$min_beds = '1';
}
if($_GET['max_beds'] && !empty($_GET['max_beds'])){
$max_beds = $_GET['max_beds'];
}else{
$max_beds = '9+';
}
$posts['meta_query'][] = array(
'key' => 'bedrooms',
'value' => array($min_beds, $max_beds),
'compare' => 'BETWEEN'
);
//location filtering
if(isset( $_GET['location'] ) && $_GET['location']){
$location = $_GET['location'];
$location_val = stripslashes($location);
$posts['meta_query'][] = array(
'relation' => 'OR',
array(
'key' => 'street',
'value' => $location_val,
'compare' => 'LIKE'
),
array(
'key' => 'town',
'value' => $location_val,
'compare' => 'LIKE'
),
array(
'key' => 'county',
'value' => $location_val,
'compare' => 'LIKE'
),
array(
'key' => 'postcode',
'value' => $location_val,
'compare' => 'LIKE'
)
);
}
// property type filtering
if(isset( $_GET['type'] ) && $_GET['type']){
$posts['meta_query'][] = array(
'key' => 'type_of_property',
'value' => $_GET['type'],
'compare' => 'IN'
);
}
// secondary flash filtering
if(isset( $_GET['flash_type'] ) && $_GET['flash_type']){
$posts['meta_query'][] = array(
'key' => 'optional_category',
'value' => $_GET['flash_type'],
'compare' => 'IN'
);
}
$query = new WP_Query( $posts );
if( $query->have_posts() ){
$result = array();
$crumb = array();
while( $query->have_posts() ){
$query->the_post();
$main_field = get_field('images');
$first_row = $main_field[0];
$img = $first_row['image'];
$img_med = $img['sizes']['medium'];
$result[] = array(
"permalink" => get_permalink(),
"image" => $img_med,
"property_type" => get_field('type_of_property'),
"bedrooms" => get_field('bedrooms'),
"street" => get_field('street'),
"town" => get_field('town'),
"price" => get_field('property_price'),
"second_flash" => get_field('optional_category'),
"status" => get_field('property_status')
);
}
$crumb = array();
$crumb[] = array(
"crumb_beds" => $min_beds
);
echo json_encode($result);
echo json_encode($crumb);
}
wp_die();
}
echo json_encode($result);
echo json_encode($crumb);
These are putting on the response something like
{...}{...}
Which is invalid json. You should echo a single object to make it valid.
echo json_encode(array($result, $crumb));
//or
echo json_encode(array( "result" => $result, "crumb" => $crumb));
This way the response will be
[{...}, {...}]
//or
{"result":{...},"crumb":{...}}