window.location.reload（true）重新加载页面，但页面需要刷新才能显示更改

Question

Have a function that makes a change to taxonomy term via AJAX. This works great, except the content remains unchanged on window.location.reload(true) even though the change has been made. See the code and GIF below to understand.

This is an example that adds the button and reloads page on click

if ( 'publish' === $post->post_status && $post->post_type === 'campaigns' ) {
$text = (in_category( 'live') ? 'Activate' : 'Activate');
echo '<li><a href="" onclick="window.location.reload(true);return toggleLive(this, ' . $post->ID . ');">' . $text . '</a></li>';
}

So, is there another way that I can reload the page onClick that may help? Also, the post modified date is not updating, yet changes have been made to the post.

Thanks in advance for your help

EDIT - I have already tried location.href = location.href; and document.location.reload();

ADDITIONAL INFO -

Function

add_action('wp_ajax_toggle_live', function(){
// Check ID is specified
if ( empty($_REQUEST['post']) ) {
    die( __('No post ID specified.') );
}

// Load post
$post_id = (int) $_REQUEST['post'];
$post = get_post($post_id);
if (!$post) {
    die( __('You attempted to edit an item that doesn’t exist. Perhaps it was deleted?') );
}

// Check permissions
$post_type_object = get_post_type_object($post->post_type);
if ( !current_user_can($post_type_object->cap->edit_post, $post_id) ) {
    die( __('You are not allowed to edit this item.') );
}

// Load current categories
$terms = wp_get_post_terms($post_id, 'campaign_action', array('fields' => 'ids'));

// Add/remove Starred category
$live = get_term_by( 'live', 'campaign_action' );

$index = array_search($live, $terms);
if ($_REQUEST['value']) {
    if ($index === false) {
        $terms[] = $live;
    }
} else {
    if ($index !== false) {
        unset($terms[$index]);
    }
}

wp_set_object_terms( $post_id, 'live', 'campaign_action' );

die('1');
});

JS

function toggleLive(caller, post_id)
{

var $ = jQuery;
var $caller = $(caller);

var waitText = ". . .";
var liveText = ". . .";
var deactivateText = ". . .";

// Check there's no request in progress
if ($caller.text() == waitText) {
    return false;
}

// Get the new value to set to
var value = ($caller.text() == liveText ? 1 : 0);

// Change the text to indicate waiting, without changing the width of the button
$caller.width($caller.width()).text(waitText);

// Ajax request
var data = {
    action: "toggle_live",
    post:   post_id,
    value:  value
};

jQuery.post("<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php", data, function(response)
{
    if (response == "1") {

        // Success
        if (value) {
            $caller.text(deactivateText);
        } else {
            $caller.text(liveText);
        }

    } else {

        // Error
        alert("Error: " + response);

        // Reset the text
        if (value) {
            $caller.text(deactivateText);
        } else {
            $caller.text(liveText);
        }

    }

    // Reset the width
    $caller.width("auto");
});

// Prevent the link click happening
return false;
}

IT WORKS RIGHT ON PAGE THAT ISN'T SINGULAR

Answer 1

Is toggleLive the function that makes the AJAX request? You are calling reload immediately on click before changes are reflected on the backend. If you are using Jquery include your reload code in the complete callback function that indicates completion of your AJAX request.