web-dev-qa-db-fra.com

Mise à jour du profil utilisateur avec AJAX ne fonctionne pas

J'essaie de configurer une fonctionnalité de profil d'utilisateur frontal personnalisée et j'utilise AJAX pour permettre aux utilisateurs de modifier leur profil. C’est la première fois que j’ai installé AJAX sur WP, et j’ai l’impression d’être si proche! J'ai consulté beaucoup d'autres forums, et je n'arrivais pas à passer où je suis maintenant. Tout conseil aiderait!

J'ai un thème enfant configuré avec un modèle de profil utilisateur configuré avec un formulaire. Ensuite, j'ai un fichier js pour gérer le AJAX avec jQuery. Ensuite, j'ai mis en file d'attente et localisé mon script dans le fichier functions.php, ainsi qu'une action de rappel configurée dans le fichier functions.php. Je pense qu'il y a quelque chose qui ne va pas avec mon rappel. J'ai le code collé ci-dessous.

FORME: 

<form id="user-profile-frontend">

    <label>
        <span>Email:</span>
        <input type="text" name="email" id="email-val" value="<?php echo $current_user->user_email ?>" />
    </label>

    <label>
        <span>First Name:</span>
        <input type="text" name="first-name" id="first-name" value="<?php echo $current_user->user_firstname ?>" />
    </label>

    <label>
        <span>Last Name:</span>
        <input type="text" name="last-name" id="last-name" value="<?php echo $current_user->user_lastname ?>" />
    </label>

    <label>
        <span>Display Name:</span>
        <input type="text" name="display-name" id="display-name" value="<?php echo $current_user->display_name ?>" />
    </label>

    <input type="submit" value="Update Profile" />
</form>

jQuery AJAX fichier JavaScript 

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

    jQuery('#user-profile-frontend').submit(function(e){

        e.preventDefault();

        var user_meta_val = jQuery( '#first-name' ).val();
        var user_meta_key = jQuery( '#first-name' ).attr('id');

        if ( jQuery('user_meta_val') ) {
            jQuery.ajax ({
                url: user_meta_ajax.ajaxurl,
                type: 'POST',
                data: {
                    action: 'user_meta_callback',
                    'user_meta_val': user_meta_val,
                    'user_meta_key': user_meta_key
                }
            })
            .success( function(results) {
                console.log( 'User Meta Updated' );
            })
            .fail ( function(data) {
                console.log( data.responseText );
                console.log( 'Request Failed' + data.statusText );
            })
        } else {
            console.log( 'Uh oh. User error message' );
        }

        return false;
    });

});

actions functions.php 

function user_profile_enqueue() {

    // Register script for localization
    wp_register_script ( 
        'user-profile-mod',
        get_stylesheet_directory_uri() . '/js/user-profile-mod.js',
        array( 'jquery' ),
        '1.0',
        true
    );

    // Localize script so we can use $ajax_url
    wp_localize_script (
        'user-profile-mod',
        'user_meta_ajax',
        array(
            'ajaxurl'   => admin_url( 'admin-ajax.php' )
        )
    );

    // Enqueue script
    wp_enqueue_script( 'user-profile-mod' );
}
add_action( 'wp_enqueue_scripts', 'user_profile_enqueue' );

function user_meta_callback() {

    if ( !isset( $_POST) || empty($_POST) || !is_user_logged_in() ) {
        header( 'HTTP/1.1 400 Empty POST Values' );
        echo 'Could not verify POST values';
        exit;
    }

    $user_id = get_current_user_id();
    $user_meta_key = sanitize_text_field( $_POST['user_meta_key'] );
    $user_meta_val = sanitize_text_field( $_POST['user_meta_val'] );

    // Update single meta value
    update_user_meta( $user_id, $user_meta_key, $user_meta_val );

    // if (is_wp_error($user_id)) {
    //    echo $user_id->get_error_message();
    // }
    // else {
    //    echo 'Field updated!';
    // }

    exit;
}
add_action( 'wp_ajax_user_meta_callback', 'user_meta_callback' );
add_action( 'wp_ajax_nopriv_user_meta_callback', 'user_meta_callback' );

Pour le moment, j'essaie simplement de le faire fonctionner avec un, puis j'utiliserai wp_update_user pour mettre à jour l'objet utilisateur lors de l'envoi.

Ce que j’ai fait jusqu’à présent pour tenter de diagnostiquer le problème: Chrome Console ne génère aucune erreur JS. Lorsque je soumets le formulaire, jQuery reçoit le message de réussite indiquant "Utilisateur méta mis à jour", mais j'actualise la page et/ou vérifie le profil depuis le tableau de bord et les données n'ont pas changé.

Le site dev est hébergé sur WP Engine et, en utilisant le journal pour le débogage, je n'ai aucune erreur à ce stade. La seule erreur que j'ai eu était de gérer is_wp_error alors je l'ai juste commenté. Je ne suis pas concentré sur cela en ce moment.

Je ne pense pas que cela frappe la fonction de rappel.

Merci d'avance.

jqueryajaxusers
3
Dylan Wagner

Toute cette affaire fonctionne aussi loin que je peux dire. À l'avenir, il sera peut-être plus facile de déboguer des choses en utilisant PHP error_log() pour écrire dans le debug.log à certains moments, comme dans votre rappel ajax.

Si vous souhaitez uniquement exécuter cette opération ajax pour les utilisateurs connectés, vous pouvez supprimer le hook wp_ajax_nopriv et le conditionnel is_user_logged_in() et simplement vous en tenir au hook wp_ajax_*. wp_ajax_nopriv est "Pas de privilèges" ce qui signifie qu'il sera exécuté pour les utilisateurs non-connectés. La fonction normale wp_ajax ne sera exécutée que pour les utilisateurs connectés.

Le problème principal est que vos clés ne correspondent pas aux clés usermeta de WordPress. Vous récupérez l'ID d'entrées qui est first-name mais WordPress s'attend à ce que first_name soit la métakey. Je parie que si vous vérifiiez la table uusermeta de votre base de données, vous verriez quelques instances de first-name comme une métakey.

1
Howdy_McGee