I have a website that was in version 4.7.6 and made an update to 4.8.3 which is the current one. After the update, I noticed that the ajax call is not working. When I inspected the page and went to network, I see the long green bar about the admin-ajax.php as you can see in the image.
The php file code that is being read for that particular page looks like this:
<?php /** * The template used for displaying List of tours of category * * @package WordPress * @subpackage Twenty_Sixteen * @since Twenty Sixteen 1.0 */ ?> <?php $ limit = get_field('tour_per_page', 'option'); $ queried_object = get_queried_object(); $ title_color = ''; if ($ queried_object->taxonomy): $ taxonomy = $ queried_object->taxonomy; $ cat_title = $ queried_object->name; $ term_id = $ queried_object->term_id; $ parents = get_category_parents($ term_id); $ parent = explode('/', $ parents); $ parent_term = get_term_by('slug', $ parent[0], 'tour_category'); $ color = get_field('category_color', $ taxonomy . '_' . $ parent_term->term_id); // $ color = get_field('category_color', $ taxonomy . '_' . $ term_id); $ banner = get_field('category_banner', $ taxonomy . '_' . $ parent_term->term_id); $ cat_image = get_field('category_image', $ taxonomy . '_' . $ term_id); $ rgba1 = hex2rgba($ color, 1); $ rgba2 = hex2rgba($ color, 0.7); $ title_color = ($ rgba2) ? 'background:' . $ rgba2 . ';' : ''; endif; $ style = ''; if ($ banner): $ style = "background:url('" . $ banner . "'); background-position: 50% 50% ; background-size: cover;"; endif; ?> <!-- top banner --> <div class="inner-banner-wrap africa-banner" style="<?php echo $ style; ?>"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="inner-banner-text"> <?php if ($ cat_title): ?> <div class="banner-title" style="<?php echo $ title_color; ?>"> <?php if ($ cat_image): ?> <span><img src="<?php echo $ cat_image; ?>" alt="africa-map"></span> <?php endif; echo $ cat_title; ?> </div> <?php endif; ?> </div> </div> </div> </div> </div> <!-- end top banner --> <!-- Bread Crumb Menu Start--> <div class="container"> <?php get_template_part('template-parts/content', 'breadcrumb'); ?> </div> <!-- Bread Crumb Menu End--> <div class="travel-event-wrap blog-wrap travel-listing-wrap"> <div class="container"> <div class="row"> <!-- Start Sidebar--> <div class="col-xs-12 col-md-3"> <div class="filter-list-section" id="filter-list-section"><ul></ul></div> <div class="side-bar-wrap"> <?php dynamic_sidebar('search_tour'); ?> </div> </div> <!-- End Sidebar --> <?php // only run this on category pages $ this_cat = &get_category($ wp_query->get_queried_object_id()); $ count = $ this_cat->count; ?> <!-- Tour List Section Start--> <div class="col-xs-12 col-md-9"> <div class="desc-block"> <h1 style="color:<?php echo $ rgba1; ?>"><?php echo $ this_cat->name; ?></h1> <p><?php echo category_description($ this_cat->term_id); ?></p> </div> <div class="filter-bar clearfix"> <div class="event-number pull-left"> <span></span> rundresor tillgängliga </div> <?php dynamic_sidebar('sort_tour'); ?> </div> <div id="event-list-wrap" class="event-list-wrap"></div> <!-- Tour List Section End--> <input type="hidden" id="limitstart" value="0"/> <input type="hidden" id="limit" value="<?php echo $ limit; ?>"/> <input type="hidden" id="totaltour" value="<?php echo $ count; ?>"/> <div id="loadmore" class="text-center" style="display: none;"><img src="<?php echo get_template_directory_uri() . "/images/loading.gif"; ?>"></div> </div> </div> </div> </div> <script> var xhr; jQuery(document).ready(function () { jQuery('#loadmore').show(); loaddata(); if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { jQuery('body').scroll(function () { if( (jQuery('body').scrollTop() + jQuery('body').height()) >= ( jQuery(document).height() - jQuery("#footer_div").height() ) ) { var limitstart = jQuery('#limitstart').val(); var totaltour = jQuery('#totaltour').val(); if (parseInt(limitstart) < parseInt(totaltour)) { jQuery('#loadmore').show(); loaddata(); } else { jQuery('#loadmore').hide(); } } }); }else{ jQuery(window).scroll(function () { if( (jQuery(window).scrollTop() + jQuery(window).height()) >= ( jQuery(document).height() - jQuery("#footer_div").height() ) ) { var limitstart = jQuery('#limitstart').val(); var totaltour = jQuery('#totaltour').val(); if (parseInt(limitstart) < parseInt(totaltour)) { jQuery('#loadmore').show(); loaddata(); } else { jQuery('#loadmore').hide(); } } }); } }); function loaddata() { var formSort = jQuery('#sortTour').serialize(); var formSearch = jQuery('#searchTour').serialize(); var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>'; var limitstart = jQuery('#limitstart').val(); var limit = jQuery('#limit').val(); var data = { 'action': 'filter_tour', 'formSort': formSort, 'formSearch': formSearch, 'limitstart': limitstart }; if (xhr && xhr.readyState != 4 && xhr.readyState != 0) { xhr.abort(); } xhr = jQuery.post(ajaxurl, data, function (response) { jQuery('.bakdrop').hide(); jQuery('.loader').hide(); var data = JSON.parse(response); jQuery('#event-list-wrap').append(data.html); jQuery('#totaltour').val(data.total_tour); jQuery('.event-number span').html(data.total_tour); limitstart = parseInt(limitstart) + parseInt(limit); jQuery('#limitstart').val(limitstart); jQuery('#loadmore').hide(); }); } </script> I initially thought it is because the javascript code is not in a separate js file and enqueued so I had done that but made no difference.
Is there anything with the ajax call? Hope you can help.
