Having an issue with CSS not getting applied correctly after making an AJAX call with pagination. The problem seems to be specific to Chrome, as it works fine in Firefox. When inspecting the element, the CSS is present but not being applied properly until manually adjusted.
Note: This example only showcases a limited number of results for the "yacht-charter" div.
Any help or suggestions would be greatly appreciated.
Thanks!
<div class="row text-center mx-auto p-lg-5"><span class="my-auto mr-5">Filter:</span>
<form id="luxury-form" class="w-75 d-flex">
<select id="no_of_passengers" name="no_of_passengers" class="custom-select mr-5">
<option value="-1"># of Passengers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select><select id="boat_type" class="custom-select" name="boat_type">
<option value="all">Boat Type</option>
<option value="Sailing">Sailing</option>
<option value="Motor sailor">Motor Sailor</option>
<option value="Motor">Motor</option>
</select>
</form>
</div>
<div class="row w-100" id="yacht-charter">
<div class="box col"><img src="https://poseidon-dev.axon-media.com/wp-content/uploads/Irene-Hero.jpg" data-id="2264" alt="2264">
<div class="yacht-feature-inner"><a href="https://poseidon-dev.axon-media.com/product/irenes">
<h3 class="heading2 minerva-font">IRENE’S</h3>
<p>4 Cabins | 4 CREWS | VIEW DATES AND RATES ></p>
</a></div>
</div>
<div id="luxury-pagination" class="row heading3 font-weight-light w-75 mx-auto pt-5 justify-content-center"><span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="https://poseidon-dev.axon-media.com/destination/greece/luxury-crewed-yacht-charter?paged=2">2</a>
<a class="page-numbers" href="https://poseidon-dev.axon-media.com/destination/greece/luxury-crewed-yacht-charter?paged=3">3</a>
<a class="page-numbers" href="https://poseidon-dev.axon-media.com/destination/greece/luxury-crewed-yacht-charter?paged=4">4</a>
<a class="next page-numbers" href="https://poseidon-dev.axon-media.com/destination/greece/luxury-crewed-yacht-charter?paged=2"><i class="fas fa-angle-right"></i></a></div><!-- navigation ENDS -->
</div>
<script type="text/javascript">
var url = "<?php echo admin_url('admin-ajax.php');?>";
var cur_uri = "<?php echo $_SERVER['REQUEST_URI']?>";
var nonce = "<?php echo wp_create_nonce('luxury_filters'); ?>";
jQuery(document).ready(function ($) {
jQuery("#no_of_passengers").change(function (e) {
e.preventDefault();
var data = {
action: 'luxury_filter',
passengers : jQuery(this).val(),
boat : jQuery('#boat_type').val(),
category : 'luxury-charter',
uri : cur_uri,
cols : 6,
nonce: nonce
};
jQuery.ajax({
url : url,
type: 'post',
data: data,
success: function (response) {
jQuery("#yacht-charter").replaceWith(response);
}
});
});
jQuery(document).on("change", "#boat_type", function(e) {
var data = {
action: "luxury_filter",
boat : jQuery(this).val(),
passengers : jQuery("#no_of_passengers").val(),
uri : cur_uri,
category : "luxury-charter",
cols : 6,
nonce: nonce,
async: false
};
jQuery.ajax({
url : url,
type: "post",
data: data,
dataType: "html",
success: function (response) {
jQuery('#yacht-charter').empty();
jQuery('#yacht-charter').append(response);
}
});
});
});
</script>