AJAX success response is not working but it's saving my changes

Question

I'm a beginner in jQuery-Ajax so please bear with me. My Ajax response does not seem to load but my changes are being saved. but gives me this error on admin-ajax.php "call_user_func() expects parameter 1 to be a valid callback, function '_update_post_ter_count' not found or invalid function name" Here is my function, could you point what i'm doing wrong?

add_action( 'wp_ajax_nopriv_save_sort', 'ccmanz_save_reorder' );
add_action('wp_ajax_save_sort','ccmanz_save_reorder');
function ccmanz_save_reorder() { //checking

//verify user intent
check_ajax_referer( 'wp-job-order', 'security' ); // this comes from wp_localize_script() in hrm-jobs.php
//capability check to ensure use caps
if ( ! current_user_can( 'manage_options' ) ) {
    wp_die( __( 'You do not have permission to access this page.' ) );
}

$order   = explode( ',', $_POST['order'] );
$counter = 0;

foreach ( $order as $item_id ) {
    $post = array(
        'ID'         => (int) $item_id,
        'menu_order' => $counter,
    );

    wp_update_post( $post );
    $counter ++;
}
wp_send_json_success('POST SAVED');
}

My AJAX Call

jQuery(document).ready(function($) {

sortList = $( 'ul#custom-type-list' ); //store
var animation = $ ( '#loading-animation' );
var pageTitle = $ ( 'div h2');

sortList.sortable({

update: function ( event, ui) {
    animation.show();

    $.ajax({
        url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
            type: 'POST',
            async: true,
            cache: false,
            dataType: 'json',
            data:{
                action: 'save_sort', // Tell WordPress how to handle this ajax request
                order: sortList.sortable( 'toArray' ).toString(), // Passes ID's of list items in   1,3,2 format
                security: WP_JOB_LISTING.security
            },
        success: function( response ) {
            animation.hide();
            $('div.updated').remove();
            if( true === response.success ) {
                console.log(sortList.sortable( 'toArray' ));
                pageTitle.after(  
                '<div id="messsage" class="updated"><p>' + WP_JOB_LISTING.success + '</p></div>'
                );
            } else {
                $('div.error').remove();
                pageTitle.after( '<div id="messsage" class="error"><p>' + WP_JOB_LISTING.failure + '</div>' );
            }

        },
        error: function ( error ) {
            $( 'div.error' ).remove();
            animation.hide();
            //pageTitle.after( '<div id="messsage" class="error"><p>' + WP_JOB_LISTING.failure + '</div>' );
        }
    });

}//update

   }); //sortable
});//jquery

Answer 1

I'm beginner in jQuery AJAX too, and I always tried with $.ajax, but I'm using just $.post to my requisitions now and they work well. The syntax is more simple and less risk to make a mistake.

Obviously, if I'm wrong in this way, please someone alert me about it.

In $.post() you need to put the url, the variable would get by POST as object and a handler function(data,status). Just it.

In PHP code I just echo what I want to return to my page, and I've gotten an enconde issues once or twice, I solve the enconde issues in the JS, not in PHP.

Sometimes, I return numbers from PHP echo, and I use switch statement in JS to make what I want depending of the returned number, it solves some problems too.

I know I didn't solve your problem, instead I'm trying to get alternative ways, but lemme known if it helps

Answer 2

Always exit your ajax actions wp_die:

add_action( 'wp_ajax_foobar', 'my_ajax_foobar_handler' );

function my_ajax_foobar_handler() {
    // Make your response and echo it.

    // Don't forget to stop execution afterward.
    wp_die();
}

_update_post_ter_count is not visible in the snippet you've pasted, so I cannot help with that.