web-dev-qa-db-fra.com

Mettre à jour les méta-valeurs avec AJAX

Je travaille sur un système de vote sous Wordpress. Je l'ai d'abord créé avec des requêtes GET mais quelqu'un m'a dit vous ne devriez pas utiliser GET pour ceci , j'ai donc commencé à travailler avec AJAX pour mettre à jour les champs personnalisés/les méta valeurs, après avoir lu cet article . J'ai lu une grande partie de la documentation des pages jQuery et Wordpress AJAX _ dont je dispose maintenant.

Je pense que je suis sur la bonne voie, mais il manque quelque chose/ou je fais mal.

La fonction de vote fonctionne bien, car je l’ai déjà testée avec les requêtes GET.

J'ai ce formulaire de test HTML simple:

<form id="vote_form" method="post">
    <input type="hidden" id="id" name="id" value="810">
    <input type="hidden" id="post_id" name="post_id" value="811">
    <input type="submit">
</form>

J'ai ce fichier jQuery inclus dans mon header.php et bien sûr inclus la bibliothèque jQuery elle-même.

jQuery(document).ready(function() {

    jQuery( "#vote_form" ).submit( function( event ) {

        event.preventDefault();

        var id = jQuery("#vote_form #id").val();
        var post_id = jQuery("#vote_form #post_id").val();
        var vote = 'up';

        jQuery.ajax({
            type: "POST",
            url: stn_vote.ajaxurl,
            data: { 
                id: id, 
                post_id: post_id,
                vote: vote, 
                action: 'stn_voting' 
            },

        }); 

    });

});

Et ma fonction de vote est reliée à l'action wp_ajax.

    // Ajax Voting
wp_register_script( 'ajax-vote', get_template_directory_uri() . '/js/ajax-vote.js', array('jquery') );

$nonce = wp_create_nonce("vote_nonce");
$stn_vote_data = array(
    'ajaxurl' => admin_url( 'admin-ajax.php'),
    'nonce' => $nonce,
);
wp_localize_script( 'ajax-vote', 'stn_vote', $stn_vote_data );

function stn_script_enqueuer() {    
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'ajax-vote' );

}
add_action( 'wp_enqueue_scripts', 'stn_script_enqueuer' );

        // Vote Up
        if( isset( $_POST['id'] ) ) {

            //simple Security check
            if ( ! wp_verify_nonce( $_POST['nonce'], 'vote_nonce' ) )
                die ( 'Busted!');

            if( isset( $_POST['post_id'] ) ) {
                $post_id =  $_POST['post_id'];
            }

            if( $_POST['vote'] == 'up' ) {

                $vote_id = $_POST['id'];
                $key = 'vote_up_' . $post_id;
                $vote_up = get_post_meta( $vote_id, $key, true );
                $value = $vote_up + 1;
                $update_vote_up = update_post_meta( $vote_id, 'vote_up_' . $post_id, $value );

                // Update vote count
                $vote_count = get_post_meta( $vote_id, 'vote_count_' . $post_id, true );
                $value = $vote_count + 1;
                $update_vote_count = update_post_meta( $vote_id, 'vote_count_' . $post_id, $value );

                // Update vote percent
                $vote_percent = ( ( $vote_up + 1) / ( $vote_count + 1 ) ) * 100;
                update_post_meta( $vote_id, 'vote_percent_' . $post_id, $vote_percent );

            }

            // Vote Down
            else {          
                $vote_id = $_POST['id'];
                $key = 'vote_down_' . $post_id;
                $vote_down = get_post_meta( $vote_id, $key, true );
                $value = $vote_down + 1;
                $update_vote_down = update_post_meta( $vote_id, 'vote_down_' . $post_id, $value );

                // Update vote count
                $vote_count = get_post_meta( $vote_id, 'vote_count_' . $post_id, true );
                $value = $vote_count + 1;
                $update_vote_count = update_post_meta( $vote_id, 'vote_count_' . $post_id, $value );

                // Update vote percent
                $key = 'vote_up_' . $post_id;
                $vote_up = get_post_meta( $vote_id, $key, true );
                $vote_percent = ( $vote_up / ( $vote_count + 1 ) ) * 100;
                update_post_meta( $vote_id, 'vote_percent_' . $post_id, $vote_percent );

            }
        }
        die();

    }
    add_action('wp_ajax_stn_voting', 'ajax_stn_voting');
    add_action('wp_ajax_nopriv_stn_voting', 'ajax_stn_voting');
custom-fieldajaxhookspost-meta
2
Robbert

Couple de choses:

1: Lorsque vous incluez le script après jquery, localisez-le à l’aide de wp_localize_script function:

$nonce = wp_create_nonce("vote_nonce");
$yourscript_info = array(
    'ajaxurl' => admin_url( 'admin-ajax.php'),
    'nonce' => $nonce
);
wp_localize_script( 'yourscript', 'yourscript', $yourscript_info );

$.ajax({
    type: "POST",
    url: yourscript.ajaxurl,
    data: { id: id, vote: vote, nonce: yourscript.nonce, action: "stn_voting" },

2: Ajoutez des contrôles de sécurité en utilisant un nonce :

function ajax_stn_voting() {
    //simple Security check
    if ( ! wp_verify_nonce( $_POST['nonce'], 'vote_nonce' ) )
        die ( 'Busted!');

3: Vous n'avez pas besoin d'inclure l'ID de la publication dans les clés méta. Il est déjà attaché à la publication, il est donc déjà stocké dans la base de données.

$key = 'vote_up';
instead of
$key = 'vote_up_' . $post->ID;

Pas seulement la clé vote_up, mais tous les _ '. $ post-> ID; une partie n'est pas nécessaire à l'intérieur de la fonction. Si toutes vos clés sont différentes, vous ne pouvez pas commander les publications en fonction de ces valeurs, ce qui est tout simplement inutile.

4: Vous devez "mourir" à la fin de la fonction lorsque vous utilisez ajax:

    die();
}
add_action('wp_ajax_stn_voting', 'ajax_stn_voting');
add_action('wp_ajax_nopriv_stn_voting', 'ajax_stn_voting');

Sinon, le script me convient bien.

Et ce que G. M. a dit dans les commentaires ci-dessus :)

2
passatgt

Votre script personnalisé utilise $ 's et ne prend donc pas en compte le mode "noConflict".

Utilisez un wrapper approprié sans conflit ou remplacez simplement "$" par "jQuery" partout.

Plus d'infos: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Le raccourci $ n'est pas valide dans tous les contextes. Vous devez cesser de l'utiliser lorsque cela est possible ou le définir spécifiquement à l'aide d'un wrapper, comme décrit dans ce lien.

0
Otto