0

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.

enter image description here

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.

  • Is the returned data correct? – Drupalizeme Nov 10 '17 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 Nov 20 '17 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 Nov 20 '17 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 Nov 20 '17 at 9:18
  • As this it was your issue source, it makes sense to post it as an answer. – Drupalizeme Nov 20 '17 at 9:36
1

I 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.