使用不起作用的AJAX更新用户配置文件

时间:2017-07-26 作者:Dylan Wagner

我正在尝试设置一些定制的前端用户配置文件功能,并使用AJAX允许用户编辑他们的配置文件。这是我第一次在WP上设置AJAX,我感觉我已经很接近了!我查看了很多其他论坛,但我似乎无法超越我现在的处境。任何建议都会有帮助!

我有一个用表单设置的用户配置文件模板设置的子主题。然后,我有一个js文件来使用jQuery处理AJAX。然后,我在函数中排队并本地化了我的脚本。php以及在函数中设置了回调操作。php。我想我的电话有问题。我把代码贴在下面。

FORM:

<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 file

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 actions

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\\u update\\u user在提交时更新用户对象。

到目前为止,我所做的尝试和诊断问题:Chrome控制台没有给出任何JS错误。当我提交表单时,我从jQuery中得到了一条成功消息,上面写着“User Meta Updated”,但我刷新了页面和/或从仪表板检查了概要文件,数据没有更改。

dev站点托管在WP引擎上,并使用日志进行调试,目前我没有任何错误。我唯一的错误是处理is\\u wp\\u错误,所以我只是把它注释掉了。我现在没有把重点放在这上面。

我认为这不会影响回调函数。

提前谢谢你。

1 个回复
最合适的回答,由SO网友:Howdy_McGee 整理而成

就我所知,这整件事都起作用了。将来,使用PHP进行调试可能会更容易error_log() 写入debug.log 在某些情况下,比如在ajax回调中。

如果您只想为登录用户运行此ajax,可以删除wp_ajax_nopriv 挂钩和is_user_logged_in() 有条件的,只要坚持wp_ajax_*wp_ajax_nopriv 是“无权限”,这意味着它将为未登录的用户运行。正常的wp_ajax 功能将仅对登录的用户运行。

The main issue 您的密钥与WordPress用户元密钥不匹配。您正在获取输入IDfirst-name 但WordPress期望first_name 作为元键。我打赌如果您检查数据库uusermeta表,您会看到first-name 作为元键。

结束