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.
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.
Share Improve this question asked Nov 10, 2017 at 9:17 RagmahRagmah 111 silver badge7 bronze badges 5- Is the returned data correct? – Drupalizeme Commented Nov 10, 2017 at 9:35
- After inspection I saw that the query was returning 0 values. It turned out to be an issue with wp_queries being broken when using meta_query combined with the repeater format of Advanced Custom Fields. The latest version of WordPress fixed this issue. – Ragmah Commented Nov 20, 2017 at 9:01
- This is fine but I would subject a try catch to be able to see and return an appropriate response if something was failing. – Drupalizeme Commented Nov 20, 2017 at 9:13
- It's all working now with the new update, I previously thought the issue was ajax/javascript related but it was just a change in wp_query. Should I post my previous comment as the answer? – Ragmah Commented Nov 20, 2017 at 9:18
- As this it was your issue source, it makes sense to post it as an answer. – Drupalizeme Commented Nov 20, 2017 at 9:36
1 Answer
Reset to default 1I previously thought that the issue was ajax/javascript related but it only seemed that way because the ajax script was not receiving any data.
After inspection I saw that my query was returning 0 values. It turned out to be an issue of wp_queries breaking when using meta_query combined with the repeater format of Advanced Custom Fields.
WordPress Version 4.9 fixed this issue.