All of a sudden an AJAX call that was working fine a few days ago is currently hanging on my website. I’m not sure how to track this problem down anymore. Because this website is on WordPress, I thought maybe the 4.2.2 update screwed things up. But I reverted back to an older version, which didn’t fix it.
XHR:
What’s going on? When I click a menu item, it makes an AJAX call to admin-ajax.php and then it hangs for about 30 seconds with no client-side activity until the rest of the requests are made. I imagine, that the hang up is happening on the server but I’m not sure how to prove that.
Here’s the function with my AJAX call in it:
function loadAjax(id, pageOrder) {
ajaxCalled = true;
jQuery('.side-menu').fadeIn(200, function () {
jQuery(this).find('li.current-menu-item').removeClass('current-menu-item');
jQuery(this).find('li').eq(parseInt(pageOrder)).addClass('current-menu-item');
});
jQuery.post(
ajaxurl, // link to wp-ajax.php usually generated within a theme, if not, create manually
{
action: 'get_subpages', // Action in functions.php ajax function
id: id // parameter sent
},
function (response) {
//////console.log('response received');
if (response !== "0") {
setTimeout(function () {
jQuery('.ajax-loader').removeClass('loading');
jQuery('.ajax-loader').addClass('loaded');
}, 1500);
jQuery(".ajax-content").html(response);
defaultPageSetFigureHeight(windowHeight);
featureSidebar();
pullSubpages();
var title = jQuery('.ajax-content .content').attr('data-title');
jQuery('.logo .page').html(title);
}
});
jQuery(window).unbind('touchend touchstart wheel DOMMouseScroll mousewheel keyup').unbind(handlers);
}
function updateURL(urlPath) {
history.pushState('data', '', urlPath);
}
function detectEndScroll() {
jQuery(window).scroll(jQuery.debounce(200, function () {
scrollDetected = parseInt(scrollTop / windowHeight); // This needed to balance on scrolling
//alert(scrollTop);
if (scrollAction === 'scroll') {
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (!isiPad) {
postionPages(); // Do not remove. Bug fix
}
}
}));
}
function postionPages() {
if (!isMobile()) {
scrollAction === 'disable';
scrollTopBeforeScrolling = scrollDetected * windowHeight;
//console.log("CURRENT: " + scrollTop + " BEFORE: " + scrollTopBeforeScrolling);
if (scrollTop > scrollTopBeforeScrolling) {
direction = 'down';
} else {
direction = 'up';
}
var module = scrollTop % windowHeight;
var diff = module / windowHeight;
if (diff > 0.15 && direction === 'down') {
scrollDetected++;
}
if (diff > 0.75 && direction === 'up') {
scrollDetected--;
}
//console.log("MODULE " + module + " scrollTop: " + scrollTop + " windowHeight: " + windowHeight + " Scroll: " + scrollDetected + ' DIRECTION: ' + direction);
if (scrollTop % windowHeight !== 0) {
if (!ajaxCalled) {
var skip = scrollDetected * parseInt(windowHeight);
animateFastScrolling(skip);
}
}
}
}
Here’s the get_subpages action being called in functions.php:
add_action("wp_ajax_get_subpages", "get_subpages");
add_action("wp_ajax_nopriv_get_subpages", "get_subpages");
function get_subpages() {
$id = $_POST['id'];
$post = get_post($id);
$pageContent = $post->post_content;
$pageTitle = $post->post_title;
$subpageOpen = get_post_meta($id, "mbe_subpage_open", 1);
?>
<div class="container content alignCenter" data-title="<?php echo $pageTitle; ?>">
<?php
echo apply_filters('the_content', $pageContent);
?>
</div>
<?php
$subpages = get_post_meta($post->ID, "mbe_subpages_", 0);
$subpageArray = array();
foreach ($subpages as $element) {
$element = explode("-", $element);
$subpageIDstring = $element[1];
array_push($subpageArray, $subpageIDstring);
}
$parameters = implode(',', $subpageArray);
global $wpdb;
$subpagesResults = $wpdb->get_results("SELECT * FROM `wp_posts` WHERE `ID` IN (" . $parameters . ") AND `post_type` LIKE 'page' ORDER BY `wp_posts`.`menu_order` DESC");
createMapPopups();
foreach ($subpagesResults as $subpage) {
$subpageID = $subpage->ID;
$isHero = get_post_meta($subpageID, 'mbe_hero', 1);
$isMap = get_post_meta($subpageID, 'mbe_map', 1);
$blueMapType = get_post_meta($subpageID, 'mbe_map_blue_type', 0);
$slug = $subpage->post_name;
$isMapHistoric = get_post_meta($subpageID, 'mbe_map_historic', 1);
?>
<div class="wrapper figure subfigure <?php echo($isMap == 1 || $isMapHistoric == 1 ? "map relative notMobile" : "notmap"); ?> <?php echo ($subpageOpen == 1 ? "openStatic" : ""); ?>" id="<?php echo $slug; ?>" data-url="<?php echo get_permalink($pageID); ?>" >
<?php
$title = $subpage->post_title;
$content = $subpage->post_content;
$excerpt = get_custom_excerpt($subpage, 30, ' ... <a href="#" class="more">(Read More)</a>');
$featured_image_url_subpage = "";
if (has_post_thumbnail($subpageID)) {
$image = wp_get_attachment_image_src(get_post_thumbnail_id($subpageID), 'full');
$image_width = $image[1];
$image_height = $image[2];
$featured_image_url_subpage = $image[0];
if ($isHero == 1) {
?>
<div class="wrapper figure main" style="background-image: url(<?php echo $featured_image_url_subpage; ?>)">
</div>
<?php } else if ($isMap == 1) { ?>
<div class="map-outer">
<img src="<?php echo $featured_image_url_subpage; ?>" class="img-responsive" alt="Map" />
<?php createMarkers($blueMapType); ?>
</div>
<?php
} else if ($isMapHistoric == 1) {
?>
<div class="map-outer">
<img src="<?php echo $featured_image_url_subpage; ?>" class="img-responsive" alt="Map" />
<?php
createHistoricMarkers();
?>
</div>
<?php
createHistoricMapPopups();
} else {
?>
<div class="img relative top overflowHidden" style="background-image: url(<?php echo $featured_image_url_subpage; ?>)">
</div>
<?php
}
}
if ($isHero != 1 && $isMap != 1 && $isMapHistoric != 1) {
?>
<div class="wrapper relative">
<header class="wrapper float absolute">
<div class="container">
<div class="header-top container">
<div class="no-padding col-sm-10">
<div class="bar">
<div class="item bar-bottom"></div>
<div class="item bar-top"></div>
</div>
</div>
<div class="action col-sm-2">
<div class="share">(Share)
<?php createSocialPopup($title, $excerpt, $slug) ?>
</div>
<div class="close"></div>
</div>
</div>
<h2 class="container title noafter"><?php echo $title; ?></h2>
</div>
</header>
<header class="wrapper normal">
<div class="container">
<div class="header-top container">
<div class="no-padding col-sm-10">
<div class="bar">
<div class="item bar-bottom"></div>
<div class="item bar-top"></div>
</div>
</div>
<div class="action col-sm-2">
<div class="share">(Share)</div>
<div class="close"></div>
</div>
</div>
<h2 class="container title noafter"><?php echo $title; ?></h2>
</div>
</header>
</div>
<div class="container content">
<div class="description">
<div class="excerpt">
<?php echo apply_filters('the_content', $excerpt); ?>
</div>
<div class="full transition4">
<?php echo apply_filters('the_content', $content); ?>
<div class="bottom baseline"></div>
</div>
</div>
</div>
<?php }
?>
</div>
<?php
}
$args = array(
'post_type' => 'feature',
'numberposts' => -1,
'post_status' => 'publish'
);
$featuresCategory = get_post_meta($post->ID, 'mbe_feature_');
if (!empty($featuresCategory)) {
?>
<div class="wrapper figure featureWrapper overflowHidden">
<div class="wrapper left">
</div>
<div class="wrapper right">
</div>
<div class="container">
<div class="sidebar-holder no-padding col-sm-4 notMobile">
<div class="sidebar <?php echo(count($featuresCategory) > 1 ? 'double' : '' ); ?> feature-left">
<?php
$count = 0;
foreach ($featuresCategory as $category) {
$category = explode("-", $category);
$categoryID = $category[1];
$categoryName = $wpdb->get_results("SELECT * FROM `wp_terms` WHERE `term_id` = $categoryID");
$categoryName = $categoryName[0]->name;
?>
<h2 class="title"><?php echo strtoupper($categoryName); ?></h2>
<ul>
<?php
$args = array('showposts' => -1, 'post_type' => 'feature', 'post_status' => 'publish', 'tax_query' => array(
array(
'taxonomy' => 'feature-category',
'field' => 'term_id',
'terms' => $categoryID)
));
$features = get_posts($args);
foreach ($features as $feature) {
$title = $feature->post_title;
$slug = $feature->post_name;
?>
<li><a class="<?php echo($count === 0 ? "active" : ""); ?>" href="#<?php echo $slug ?>" data-id="<?php echo $slug ?>"><?php echo $title ?></a></li>
<?php
$count++;
}
?>
</ul>
<?php } ?>
</div>
</div>
<div class="feature no-padding content col-sm-8">
<?php
$zindex = 0;
foreach ($featuresCategory as $category) {
$category = explode("-", $category);
$categoryID = $category[1];
$args = array('showposts' => -1, 'post_type' => 'feature', 'post_status' => 'publish', 'tax_query' => array(
array(
'taxonomy' => 'feature-category',
'field' => 'term_id',
'terms' => $categoryID)
));
$features = get_posts($args);
foreach ($features as $feature) {
$title = $feature->post_title;
$slug = $feature->post_name;
$url = get_permalink($feature->ID);
$content = $feature->post_content;
$excerpt = $feature->post_excerpt;
$featured_img = "";
if (has_post_thumbnail($feature->ID)) {
$image = wp_get_attachment_image_src(get_post_thumbnail_id($feature->ID), 'full');
$image_width = $image[1];
$image_height = $image[2];
$featured_img = $image[0];
}
?>
<div class="story" data-id="<?php echo $slug; ?>" style="z-index: 990<?php echo $zindex++; ?>">
<div class="relative">
<header class="float notMobile">
<div class="first">
<?php if (!empty($featured_img)) { ?><img src="<?php echo $featured_img; ?>" class="img-responsive" width="186" alt="dow"/><?php } ?>
<h2 class="noafter"><?php echo $title ?></h2>
</div>
</header>
<header>
<div class="container second">
<?php if (!empty($featured_img)) { ?><img src="<?php echo $featured_img; ?>" class="img-responsive" width="186" alt="dow"/><?php } ?>
<h2 class="noafter"><?php echo $title ?></h2>
</div>
</header>
</div>
<div class="content">
<div class="excerpt"><?php echo apply_filters('the_content', $excerpt); ?></div>
<div class="storyContent"><?php echo apply_filters('the_content', $content); ?></div>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
<div class="wrapper">
<div class="wrapper footer posts">
<?php
$menuItems = getMenuItems(2);
for ($i = 0; $i < count($menuItems); $i++) {
if (intval($menuItems[$i]->object_id) == $post->ID) {
if ($i > 0) {
$previous = $menuItems[$i - 1];
$previous = $previous->object_id;
$previous = get_post($previous);
} else {
$previous = $menuItems[count($menuItems) - 1];
$previous = $previous->object_id;
$previous = get_post($previous);
}
if ($i >= count($menuItems) - 1) {
$next = $menuItems[0]->object_id;
$next = get_post($next);
} else {
$next = $menuItems[$i + 1];
$next = $next->object_id;
$next = get_post($next);
}
}
}
?>
<div class="item col-xs-6 previous alignRight">
<div class="button">
<div class="top">
Previous:
</div>
<div class="bottom">
<a href="<?php echo get_permalink($previous->ID); ?>"> <?php echo $previous->post_title; ?></a>
</div>
</div>
</div>
<div class="item col-xs-6 next alignLeft">
<div class="button">
<div class="top">
Next:
</div>
<div class="bottom">
<a href="<?php echo get_permalink($next->ID); ?>"><?php echo $next->post_title; ?></a>
</div>
</div>
</div>
</div>
<div class="footer download-report">
<div class="item">
<a href="/wp-content/uploads/2015/03/Report.pdf" target="_blank">DOWNLOAD FULL REPORT</a>
</div>
</div>
</div>
<?php
die();
}
Could this be caused by a memory leak? If so, I have a hard time tracking it down. Or is this happening in the PHP somewhere?
It’s probably obvious, but I admit, I’m not quite sure what I’m doing. I didn’t write all this code myself originally, but I’m in charge of the website now. Let me know if there’s anymore information I can supply you all with. Thanks.
UPDATE 6/12/15: We found out that the AJAX process works fine when we revert our WordPress version back to 4.1.5 — this must mean one of the recent WordPress updates broke it then, yeah?
