wake-up-neo.com

Aktualisieren Sie die Benutzermeta mit ajax

Ich möchte das Benutzer-Meta auf der Vorderseite mit einem Ajax-Formular bearbeiten. Das habe ich:

Das Formular hat die Benutzer-ID:

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

Dies ist das Skript:

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

Das ist was ich in meiner functions.php Datei habe

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' );
2
Al Rosado

Okay, es gibt ein paar Dinge, die nicht standardisiert sind, also habe ich ein minimales Skript zusammengestellt, das ich Stück für Stück erläutere. Hoffentlich klären Sie die Dinge bis zum Ende.

HTML-Formular

Unten finden Sie ein sehr einfaches HTML-Formular. Wir werden Javascript verwenden, um auf Einsendungen zu warten und zu verhindern, dass die Seite tatsächlich aktualisiert wird, aber das wird später sein.

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

Wir $_POSTen das Formular, aber Sie können das Formular auch $_GETen, wenn Sie möchten. In dieser Situation denke ich nicht, dass es wichtig ist.

Stellen Sie unsere Skripte in die Warteschlange

WordPress verfügt also über einen Hook, mit dem Sie Stile und Skripte an den richtigen Stellen (Kopf- oder Fußzeile) einreihen können, die als wp_enqueue_scripts bezeichnet werden. Auf diese Weise können wir unser Skript lokalisieren und eine Variable (oder zwei, wenn Sie möchten) an unser Javascript übergeben, insbesondere den ajax_url. Das sieht ungefähr so ​​aus:

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

Der obige Code ist stark kommentiert, lesen Sie daher bitte die Codekommentare durch, wenn etwas nicht sinnvoll ist. Dies würde in Ihre functions.php-Datei gehen.

Unsere Javascript/JQuery

Da ich es einfach halten wollte, verarbeiten wir in diesem Beispiel nur einen meta_value, aber Sie könnten genauso einfach mehrere meta_values an das Datenobjekt übergeben und sie in Ihrem PHP by $_POST-Index referenzieren, den wir werden später sehen. Das Folgende befindet sich in einem Skriptverzeichnis, theme-name/scripts/um-modifications.js, und ist auch stark kommentiert:

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

Endlich die eigentliche Bearbeitung! Wichtige Dinge, die zu beachten sind, sind die Haken am Ende dieser Funktion:

Hier können wir den aktuellen Benutzer abrufen und seinen user_meta oder sogar das Benutzerobjekt aktualisieren, wenn wir dies wollten.

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

Hoffentlich erleichtert Ihnen dies das Verstehen und Visualisieren. Wenn Sie Fragen haben, kommentieren Sie unten!

3
Howdy_McGee