web-dev-qa-db-fra.com

Mettre à jour la méta utilisateur en utilisant avec ajax

Je veux éditer la méta d'utilisateur sur le devant en utilisant un formulaire ajax, voici ce que j'ai

Le formulaire a l'ID utilisateur:

<form id="<?php echo $current_user->ID; ?>"...

C'est le script ::

<script>
    jQuery( document ).ready( function() {
        jQuery( '#<?php echo $current_user->ID; ?>' ).submit( function( e ) {
            e.preventDefault();
            jQuery.ajax( {
                type: "POST",
                url: ajaxurl,
                data: "action=updateUserFront&id=" + <?php echo $post->ID?>,  
                success: function() {
                    alert( 'funcionó' );
                }
            } );
        } );
    } );
</script>

C'est ce que j'ai dans mon fichier functions.php

function my_ajaxurl() {
    $html  = '<script type="text/javascript">';
    $html .= 'var ajaxurl = "' . admin_url( 'admin-ajax.php' ) . '"';
    $html .= '</script>';
    echo $html;
}
add_action( 'wp_head', 'my_ajaxurl' );

function updateUserFront_ajax() {
    $user_id    = get_current_user_id();
    $newVal     = 'test';
    $userUrl    = get_user_meta( $user_id, 'url', true ); 

    update_user_meta($post_id,'url',$newVal);

    die( $newVal );
}
add_action( 'wp_ajax_updateUserFront', 'updateUserFront_ajax' );
ajaxuser-metafront-end
2
Al Rosado

Bon, il y a quelques choses qui ne sont pas standardisées dans WordPress, alors j'ai mis en place un script minimal que je vais expliquer petit à petit. J'espère clarifier les choses pour vous au moment où vous atteignez la fin.

Formulaire HTML

Vous trouverez ci-dessous un formulaire HTML très simple. Nous allons utiliser javascript pour écouter la soumission et l’empêcher d’actualiser la page, mais ce sera pour plus tard.

<form id="um_form" method="POST">
        <p>
            <label for="um_key">
                User Meta Value:&nbsp;&nbsp;
                <input type="text" name="um_key" id="um_key" value="" style="width:100%;" />
            </label>
            <input type="submit" value="Submit" />
        </p>
    </form>

Nous sommes $_POSTing le formulaire mais vous pouvez aussi $_GET le formulaire si vous le souhaitez. Dans cette situation, je ne pense pas que cela compte.

Mettre nos scripts en file d'attente

Donc, WordPress a un crochet que vous pouvez utiliser pour mettre en file d'attente les styles et les scripts aux endroits appropriés (en-tête ou pied de page) appelé wp_enqueue_scripts. En utilisant ceci, nous pouvons localiser notre script et transmettre une variable (ou deux si vous le souhaitez) à notre code javascript, plus précisément le ajax_url. Faire cela ressemble à quelque chose comme ça:

/**
 * Enqueue our Scripts and Styles Properly
 */
function theme_enqueue() {

    $theme_url  = get_template_directory_uri();     // Used to keep our Template Directory URL
    $ajax_url   = admin_url( 'admin-ajax.php' );        // Localized AJAX URL

    // Register Our Script for Localization
    wp_register_script(
        'um-modifications',                             // Our Custom Handle
        "{$theme_url}/scripts/um-modifications.js",  // Script URL, this script is located for me in `theme-name/scripts/um-modifications.js`
        array( 'jquery' ),                              // Dependant Array
        '1.0',                                          // Script Version ( Arbitrary )
        true                                            // Enqueue in Footer
    );

    // Localize Our Script so we can use `ajax_url`
    wp_localize_script(
        'um-modifications',
        'ajax_url',
        $ajax_url
    );

    // Finally enqueue our script
    wp_enqueue_script( 'um-modifications' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue' );

Le code ci-dessus est très commenté. Veuillez donc lire les commentaires du code si quelque chose n’a pas de sens. Cela irait dans votre fichier functions.php.

Notre Javascript/JQuery

Comme je voulais rester simple, dans cet exemple, nous ne traitons qu’une seule méta_value, mais vous pouvez tout aussi facilement transmettre plusieurs meta_values à l’objet de données, en les référençant dans votre PHP par $_POST index. voir plus tard. La liste ci-dessous se trouve dans un répertoire de scripts, theme-name/scripts/um-modifications.js, et est également très commentée:

// Declare our JQuery Alias
jQuery( 'document' ).ready( function( $ ) {

    // Form submission listener
    $( '#um_form' ).submit( function() {

        // Grab our post meta value
        var um_val = $( '#um_form #um_key' ).val();

        // Do very simple value validation
        if( $( '#um_form #um_key' ).val().length ) {
            $.ajax( {
                url : ajax_url,                 // Use our localized variable that holds the AJAX URL
                type: 'POST',                   // Declare our ajax submission method ( GET or POST )
                data: {                         // This is our data object
                    action  : 'um_cb',          // AJAX POST Action
                    'first_name': um_val,       // Replace `um_key` with your user_meta key name
                }
            } )
            .success( function( results ) {
                console.log( 'User Meta Updated!' );
            } )
            .fail( function( data ) {
                console.log( data.responseText );
                console.log( 'Request failed: ' + data.statusText );
            } );

        } else {
            // Show user error message.
        }

        return false;   // Stop our form from submitting
    } );
} );

AJAX PHP Callback/Handler/Action

Enfin, le traitement actuel! Les points importants à noter sont les points d'ancrage à la fin de cette fonction:

Ici, nous pouvons obtenir l'utilisateur actuel et mettre à jour son user_meta ou même l'objet utilisateur si nous le souhaitions.

/**
 * AJAX Callback
 * Always Echos and Exits
 */
function um_modifications_callback() {

    // Ensure we have the data we need to continue
    if( ! isset( $_POST ) || empty( $_POST ) || ! is_user_logged_in() ) {

        // If we don't - return custom error message and exit
        header( 'HTTP/1.1 400 Empty POST Values' );
        echo 'Could Not Verify POST Values.';
        exit;
    }

    $user_id        = get_current_user_id();                            // Get our current user ID
    $um_val         = sanitize_text_field( $_POST['first_name'] );      // Sanitize our user meta value
    $um_user_email  = sanitize_text_field( $_POST['user_email'] );      // Sanitize our user email field

    update_user_meta( $user_id, 'first_name', $um_val );                // Update our user meta
    wp_update_user( array(
        'ID'            => $user_id,
        'user_email'    => $um_user_email,
    ) );

    exit;
}
add_action( 'wp_ajax_nopriv_um_cb', 'um_modifications_callback' );
add_action( 'wp_ajax_um_cb', 'um_modifications_callback' );

Espérons que cela vous facilite la compréhension et la visualisation. Si vous avez des questions, commentez ci-dessous!

3
Howdy_McGee