Bonjour,

J'essaie de faire un formulaire de contact ajax sur mon thème one page perso et j'ai une erreur que je ne vois pas

Version 4.9.5

//Pour éviter les conflits jQuery, ne pas saisir ni le $ ni Document.ready
jQuery("#mailForm").submit(ajaxSubmit);
function ajaxSubmit(){
  var nouveauMail = jQuery(this).serialize();
  jQuery.ajax({
    url: 'wp-admin/admin-ajax.php',//Pour envoyer un formulaire via worpress
    type: 'POST',
    data: {action="my_action", 'formData': nouveauMail},//Pour envoyer les données sérializées
    success(function(donnees) {
      jQuery('#confirmation').html(donnees);
    }
    )});
  return false;
}

Ce que je veux

Je cherche à envoyer un mail sans recharger la page

Ce que j'obtiens

Dans la console, cela m'affiche: Uncaught SyntaxError: Unexpected token function
sur cette ligne: success(function(donnees) {

Pour tant, je ne vois aucune erreur après avoir passé en revue le code de nombreuses fois mais voilà, je ne suis pas fortiche en ajax. Je vous remercie de votre aide.

14 réponses


C'est sensé être quoi success..?? Une propriété de l'objet que tu veux passer à jQuery.ajax? Parce qu'une prop ça se présente de cette façon :

{
prop : value
}
barpoi78
Auteur

Apparemment success fait partie de data. C'est ce que dit le formateur (elephorm) et comme il n'y a pas de forum chez eux c'est pas terrible.

T'as pas un lien?? Ton code est juste mal-formé... Tu ne parviens pas à le voir? Tu as écris :

{
prop : value,
prop : value,
prop : value,
value
}

Donc tu ne fermes pas data où il faudrait..? Tu le fermes avant success... Et j'imagine que success est le nom de la prop... Et "action=" ça va pas le faire non plus ^^'

Bonsoir.
Psylozoff t'a donné la solution, ton problème se situe en fait dans la ligne précédente, soit data: {action="my_action", 'formData': nouveauMail},.
Plus précisément dans la définition de la propriété action, le signe à utiliser est : et non =, il te faut donc remplacer par data: {action: "my_action", 'formData': nouveauMail},.

@Lartak, il n'y a pas que ça :-s Juste après l'objet data, sa fonction success n'est associé à aucun nom de propiété... J'imagine que la solution ressemblera à "success: () => {}" mais je ne connais pas le framework qu'il utilise..!

Il utilise jQuery comme Framework JavaScript, par contre, si la version utilisé est égale ou supérieure à la 3.0, le callback success est supprimé depuis la version 3.0.

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Il faudrait donc remplacer par :

function ajaxSubmit(){
    var nouveauMail = jQuery(this).serialize();
    jQuery.ajax({
        url: 'wp-admin/admin-ajax.php',//Pour envoyer un formulaire via worpress
        type: 'POST',
        data: {
            action: "my_action", 
            'formData': nouveauMail
        }//Pour envoyer les données sérializées
    }).done(function(donnees) {
        jQuery('#confirmation').html(donnees);
    });
    return false;
}
barpoi78
Auteur

Merci à vous d'avoir répondu. C'est vrai que la version de jQuery que j'utilise est 3.3.1 alors j'ai essayé come me l'a conseillé Lartak en refermant une parenthèse au dessus de return fales et malgré tout, j'ai l'erreur ici maintenant:

).done(function(donnees) {

et l'autocompletion de sublime text ne m'aide pas vraiment car apparemment c'est pour l'ancienne version de jQuery.

function ajaxSubmit(){
  var nouveauMail = jQuery(this).serialize();
  jQuery.ajax({
        url: 'wp-admin/admin-ajax.php',//Pour envoyer un formulaire via worpress
        type: 'POST',
        data: {
          action: "my_action", 
          'formData': nouveauMail
        },//Pour envoyer les données sérializées
        ).done(function(donnees) {
          jQuery('#confirmation').html(donnees);
        }
        )};
        return false;
      }

Tu vois vraiment pas le problème??

},                                  //Pour envoyer les données sérializées
)

Je te suggère de toujours bien mettre en forme ton code... Ca t'aidera! Aligne toujours l'ouverture et la fermeture des blocs...

function ajaxSubmit() {
    var nouveauMail = jQuery(this).serialize();
    jQuery.ajax(
        {
            url: 'wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: "my_action", 
                formData: nouveauMail
            },
    ).done(function(donnees) { //double ouverture, donc...
        jQuery('#confirmation').html(donnees);
    }) //double fermeture!
};
    return false;
}

Et les problèmes apparaitront clairement :-s

barpoi78
Auteur

Je fais comme ça et je n'ai plus d'erreur, mais cela ne fonctionne pas:

      function ajaxSubmit(){
        var nouveauMail = jQuery(this).serialize();
        jQuery.ajax({
        url: 'wp-admin/admin-ajax.php',// Pour envoyer un formulaire via worpress
        type: 'POST',
        data : {
          action : "my_action",
          'formData' : nouveauMail
        },// Pour envoyer les données sérializées
      })
        .done(function (donnees) {
          jQuery('#confirmation').html(donnees);
        })
        return false;
      }

Elle sert à quoi ta virgule?

},// Pour envoyer les données sérializées

Il sert à quoi ton return false?

barpoi78
Auteur

Oui la virgule est en trop et le return false c'est pour ne pas soumettre le formulaire.

La question à 20 000€ ce serait : "est-ce que tu as cherché de façon logique avant de débarquer ici..?"
Si c'est le cas, tu as forcément consulté cette page : http://api.jquery.com/jquery.ajax/
Et donc tu as déjà la solution depuis longtemps...