Why is my Wordpress Ajax function not working on mobile? - php

Question

I have a Wordpress website hosted on 20i. I'm almost certain that everything worked fine until I pointed the a records to get the website off its test domain and onto the actual one, this might be unrelated but I figured I'd mention it incase. Anyway for some reason my Ajax function works fine on desktop but not on mobile. When I look at it on mobile none of the posts are visible and if I select a filter nothing happens. Does anyone know what this could be? I've looked around for answers but I can't seem to find the solution.
Here's my code;
jQuery
// submit form function
jQuery('#form').on('submit', function(e){
e.preventDefault();
var $ = jQuery;
var filter = $('#form');
var form_data = $('#form').serializeArray();
$('#load_more').data('page', 1);
$.ajax({
url: ajax_url,
type: 'post',
data: form_data,
dataType: 'json',
error : function(response){
console.log(response);
},
success : function(response){
$('#loop').empty();
for( var i = 0; i < response.post_cont.length; i++ ){
var html =''+
'<div class="col-12 col-md-4 column">'+
'<a href="'+ response.post_cont[i].permalink +'">'+
'<div class="card" style="width: 100%;">'+
'<div class="post_image" style="background-image: url('+ response.post_cont[i].image +');"></div>'+
'<div class="card-body">'+
'<h5 class="card-title">'+ response.post_cont[i].title +'</h5>'+
'</div>'+
'</div>'+
'</a>'+
'</div>';
$('#loop').append(html);
}
}
});
});
php AJAX function
<?php
add_action('wp_ajax_nopriv_filter', 'filter');
add_action('wp_ajax_filter', 'filter');
// this function runs after it is called inside our_work_ajax.js
function filter(){
if( $_POST['type'] && !empty($_POST['type']) ){
$category = $_POST['type'];
}else{
$category = array( 'Assisted Needs/Residential', 'Commercial/Educational', 'Private Housing', 'Social-Housing' );
}
$args = array(
'post_type' => 'our_work',
'posts_per_page' => 9,
'orderby' => 'date',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $category
)
)
);
$query = new WP_Query( $args );
$no_of_posts = $query->found_posts;
if( $query->have_posts() ):
while( $query->have_posts() ): $query->the_post();
$main_field = get_field('Images');
$first_row = $main_field[0];
$img = $first_row['Image'];
$imgsize = $img['sizes']['large'];
// creating an array of content needed from array
$post_cont[] = array(
"permalink" => get_the_permalink(),
"image" => $imgsize,
"title" => get_the_title(),
);
endwhile;
endif;
// array getting the total number of posts
$max_posts[] = array(
"no_of_posts" => $no_of_posts
);
// converting arrays into json and submitting it to the ajax_url for the .js file
echo json_encode(array( "post_cont" => $post_cont, "max_posts" => $max_posts));
wp_reset_postdata();
die();
}
?>
HTML
<form action="" method="POST" id="form">
<div id="filters">
<div class="option">
<p>Assisted Needs/Residential</p>
<input type="checkbox" name="type[]" value="Assisted Needs/Residential">
</div>
<div class="option">
<p>Commercial/Educational</p>
<input type="checkbox" name="type[]" value="Commercial/Educational">
</div>
<div class="option">
<p>Private Housing</p>
<input type="checkbox" name="type[]" value="Private Housing">
</div>
<div class="option">
<p>Social Housing</p>
<input type="checkbox" name="type[]" value="Social Housing">
</div>
</div>
<input type="hidden" name="action" value="filter">
</form>
<div id="loop" class="row">
</div>
<script>
jQuery(document).ready(function($){
var inputs = $('#form .option input');
inputs.each(function(){
if( $(this).is(':checked') ){
$(this).parent().addClass('active');
}
});
$('#form').submit();
});
</script>
AJAX url inside functions.php
wp_localize_script( 'all_js', 'ajax_url', admin_url('admin-ajax.php') );