web-dev-qa-db-fra.com

En utilisant AJAX dans un plugin pour soumettre le formulaire - VRAIMENT confus

Avoir un peu de difficulté à utiliser tous les points d’accroché et les fonctions de Wordpress ajax.

Vous avez lu cet article: 5 astuces pour utiliser Ajax dans Wordpress

Mais est devenu confus après avoir essayé tout le code et l’avoir appliqué à un formulaire Ajax.

J'appelle une fonction de ma classe de plug-in pour faire écho à l'une des pages de messages uniques pour que les utilisateurs "survolent". La forme s'imprime bien. Voici le code du formulaire:

//the html form for the front end
function ds_swoons_form(){
global $post, $current_user;
get_currentuserinfo();

    $form = '<div id="swoon-response">';
    $form .= '</div>';

    $form .= '<form id="entry_swoon_form" name="entry_swoon_form" action="" method="POST">';
        $form .= '<input type="hidden" name="ds_postid" value="'.$post->ID.'" />';
        $form .= '<input type="hidden" name="ds_userid" value="'.$current_user->ID.'" />';
        $form .= '<input type="submit" value="Swoon" class="swoon-submit" />';
    $form .= '</form>';

return $form;
}//end ds_swoons_form

Mes Enqueues:

wp_enqueue_script('json-form');

// embed the javascript file that makes the swoons AJAX request
wp_enqueue_script( 'swoon_ajax_request', plugins_url('ds-swoons/js/swoon-ajax-form.js'), array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'swoon_ajax_request', 'SwoonAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

//add the AJAX action
add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );

Et mon javascript:

jQuery('#entry_swoon_form').ajaxForm({
target: '#swoon-response',
dataType: 'html',
data: {
       action: 'swoons_submit_action'
      },
url: SwoonAjax.ajaxurl,
success : function(responseText) {      
    jQuery('#swoon-response').html('Swooned!');
}
});

Je suis un novice en matière de AJAX alors je suis peut-être mal à l'aise là-dessus. L'article que j'ai lu était bon jusqu'à la fin, où il montrait un exemple de demande ajaxForm et où je me suis perdu.

La fonction de formulaire ajax ne s'exécute jamais et la page se recharge simplement. SO Je suppose que l'une de mes fonctions de mise en file d'attente n'est pas correcte.

Merci d'avance.

MODIFIER ------------------------------------------------- ------- Nouveau code de méthode jQuery.post - mais il ne fonctionne toujours pas

jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        SwoonAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'swoons_submit_action',
            //nonce for validation
            //swoonNonce : SwoonAjax.swoonNonce,
            // other parameters can be added along with "action"
            postid : SwoonAjax.postid,
            userid : SwoonAjax.userid
        },
        function( response ) {
            alert( response );
        }
    );
});
console.log(SwoonAjax.ajaxurl)
});

J'ai une erreur très rapide dans FireBug mais je ne vois pas ce qui se passe assez rapidement avant la fin de la demande. Et aucune erreur ne reste après l'exécution du fichier .post. Aucune donnée n'est mise à jour dans la base de données, je sais donc qu'elle ne sera pas renvoyée.

Merci

EDIT 2 ---------------------------------------------------- -----------------

J'ai reçu le formulaire à soumettre et met à jour la base de données à l'aide du code suivant:

jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
    var $form = $( 'form#entry_swoon_form' ),
        postid = $form.find( 'input[name="ds_postid"]' ).val(),
        userid = $form.find( 'input[name="ds_userid"]' ).val();
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        SwoonAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'swoons_submit_action',
            //nonce for validation
            //swoonNonce : SwoonAjax.swoonNonce,
            // other parameters can be added along with "action"
            ds_postid: postid,
            ds_userid: userid

        },
        function( response ) {
            alert( response );
        }
    );
    return false;
});

Cependant: je n'arrive pas à obtenir les valeurs de champ de formulaire (masquées) à envoyer à la fonction PHP pour l'insertion de base de données. Les informations sont dans la console Firebug en cours d'envoi, mais aucune information ne parvient à la fonction PHP. Je pense que cela a quelque chose à voir avec la façon dont j'envoie les champs à la fonction PHP mais je ne suis pas sûr. Merci!

plugin-developmentajaxforms
3
dkmojo

Choses que vous pouvez vérifier:

  1. Affichez le code source de la page et recherchez vos fichiers js, s'ils sont inclus ou non, et si leur ordre est correct.
  2. Utilisez console.log(SwoonAjax.ajaxurl) pour vérifier si vous obtenez le chemin correct dans votre fichier js.
  3. Dans Firebug, passez à l'onglet Console, puis essayez de lancer votre demande AJAX. Vous verrez le traitement ici, et les erreurs, le cas échéant.
  4. Essayez d’utiliser la méthode jquery.post de jQuery pour AJAX. C'est plus facile.

Ces vérifications vous aideront à identifier le problème.

Un conseil: modifiez plugins_url('ds-swoons/js/swoon-ajax-form.js') en plugins_url('js/swoon-ajax-form.js', __FILE__), cela vous donnera le bon dossier de plug-in.

4
Rutwick Gangurde

Comme vous avez utilisé cette fonction pour lier la WordPress ajax add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );, vous devez alors transmettre une variable d'action nommée swoons_submit_action . Sinon, WordPress admin-ajax.php le rejettera.

Souhaitez-vous utiliser cet extrait pour soumettre des données?

$('#entry_swoon_form').submit(functions() {
    var data = $(this).serialize();
    $.ajax({
        type: 'post',
        url: ajaxurl,
        dataType: 'json',
        data: data + '&action=swoons_submit_action',
        cache: false,
        success: function(response){
            console.log(response);
        }
    }); 
});
1
Tareq