I want to make an AJAX request on every select value change to update the real value from database. I'm coding inside a shortcode on functions.php. I have a select element like this one below,

echo '<select name="changeValue" onchange="changeValue(' . $user->ID . ', this.options[this.selectedIndex])">'

At the end of the shortcode, I do:

?>
    <script type="text/javascript">
        function changeValue(id, valueElement) {
            jQuery.post(
                "<?php echo admin_url('admin-ajax.php'); ?>", 
                {
                    'action': 'update_value',
                    'data':  {
                        user_id: id,
                        value: valueElement.value
                    }
                }, 
                function(response){
                    console.log(response)
                }
            );
        }
    </script>
<?
}
add_shortcode('the_shortcode', 'the_shortcode');

function update_value() {
    $user_id = $_POST['data']['user_id'];
    $value= $_POST['data']['value'];
    echo $user_id . ' - ' . $empresa;

    //return update_user_meta($user_id , 'value', $value);
    wp_die();
}
add_action( 'wp_ajax_update_value', 'update_value' );
add_action( 'wp_ajax_nopriv_update_value', 'update_value' );

My code works when I'm logged as Admin. However if I'm logged as another user, console.log(response) returns the whole HTML page content. What am I doing wrong?

EDIT: Another difference is that when logged as Admin, admin-ajax.php returns 200 OK, whereas when logged as a user it returns 302 Found.

I want to make an AJAX request on every select value change to update the real value from database. I'm coding inside a shortcode on functions.php. I have a select element like this one below,

echo '<select name="changeValue" onchange="changeValue(' . $user->ID . ', this.options[this.selectedIndex])">'

At the end of the shortcode, I do:

?>
    <script type="text/javascript">
        function changeValue(id, valueElement) {
            jQuery.post(
                "<?php echo admin_url('admin-ajax.php'); ?>", 
                {
                    'action': 'update_value',
                    'data':  {
                        user_id: id,
                        value: valueElement.value
                    }
                }, 
                function(response){
                    console.log(response)
                }
            );
        }
    </script>
<?
}
add_shortcode('the_shortcode', 'the_shortcode');

function update_value() {
    $user_id = $_POST['data']['user_id'];
    $value= $_POST['data']['value'];
    echo $user_id . ' - ' . $empresa;

    //return update_user_meta($user_id , 'value', $value);
    wp_die();
}
add_action( 'wp_ajax_update_value', 'update_value' );
add_action( 'wp_ajax_nopriv_update_value', 'update_value' );

My code works when I'm logged as Admin. However if I'm logged as another user, console.log(response) returns the whole HTML page content. What am I doing wrong?

EDIT: Another difference is that when logged as Admin, admin-ajax.php returns 200 OK, whereas when logged as a user it returns 302 Found.

• ajax

2 Answers 2

What a type you work with response If you work with json

$.post( ajaxurl , data , function(res){
// your code 
},'json');

Remove wp_die() and replace with die()

When using admin-ajax.php the admin_init hook is fired, so many functions that run in the admin will also run when ajax is used. In this case there is some code locking non admin users out of the admin by redirecting them somewhere else. This could be part of your theme or coming from a plugin.

When the redirect fires it 'returns' the html of the homepage to your ajax request, which is why you see html instead of the response you expect.

The redirect would need to be modified to ignore ajax requests:

if ( ( ! current_user_can( 'level_5' ) ) && ( $_SERVER['PHP_SELF'] != '/wp- admin/admin-ajax.php' ) )  {
    wp_redirect( site_url() );
}

You could also use the REST API instead of ajax to avoid this issue.