web-dev-qa-db-ja.com

でユーザープロファイルを更新する AJAX 働いていない

私はいくつかのカスタムフロントエンドユーザープロファイル機能を設定しようとしています。私はAJAXを使用してユーザーが自分のプロファイルを編集できるようにしています。 WPでAJAXを設定するのは今回が初めてです。私は他の多くのフォーラムをチェックしました、そして私は今いるところを通り過ぎるように思えませんでした。どんなアドバイスでも役立つでしょう！

フォームで設定されたユーザープロファイルテンプレートで設定された子テーマがあります。それからjQueryでAJAXを処理するjsファイルがあります。それから私は自分のスクリプトをfunctions.phpに入れ、ローカライズし、さらにfunctions.phpにコールバックアクションを設定しました。コールバックで何か問題があると思います。以下にコードを貼り付けました。

形： 

<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 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;
    });

});

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' );

現時点で私はただそれを動かそうとしているところです。それからwp_update_userを使って送信時にユーザーオブジェクトを更新します。

問題を診断して診断するためにこれまでに行ったこと：ChromeコンソールでJSエラーが発生していません。フォームを送信すると、jQueryから "User Meta Updated"という成功メッセージが表示されますが、ダッシュボードからページを更新するかプロファイルを確認してもデータが変更されていません。

開発サイトはWP Engineでホストされており、ログを使用してデバッグを行いますが、現時点ではエラーはありません。私が持っていた唯一のエラーはis_wp_errorの処理からのものだったので、私はそれをコメントアウトしてもらうだけです。今は焦点を当てていません。

私はそれがコールバック関数に当たっているとは思わない。

前もって感謝します。

jqueryajaxusers
3
Dylan Wagner

私が言うことができる限り、このこと全体が機能します。将来的には、特定の時点でPHP error_log()を使用してdebug.logに書き込むことで、物事をデバッグする方が簡単になるでしょう。

ログインしているユーザーのためだけにこのAjaxを実行したい場合は、wp_ajax_noprivフックとis_user_logged_in()条件を削除し、wp_ajax_*フックをそのまま使用することができます。 wp_ajax_noprivは "特権なし"です。つまり、ログインしていないユーザーに対して実行されます。通常のwp_ajax関数はログインしたユーザーに対してのみ実行されます。

主な問題 はあなたのキーがWordPressのusermetaのキーと一致しないことです。あなたはfirst-nameという入力IDをつかんでいますが、WordPressはfirst_nameをメタキーとして期待しています。あなたのデータベースのuusermetaテーブルをチェックすれば、メタキーとしてfirst-nameのインスタンスがいくつか表示されるでしょう。

1
Howdy_McGee