SweetAlert 2 - Recaptcha?

Alex
Javascript

Salut à tous, j'ai un léger problème sur un de mes sites actuellement en création, je m'explique:

J'ai utilisé SweetAlert 2 (Pour ceux qui conaissent pas: https://limonte.github.io/sweetalert2/ ), et je veux faire un truc de "vote", et afin d'éviter les floods de bot, j'utilise ReCaptcha, malheureusement quand j'essaye de l'inclure dans le script Javascript rien n'est affiché... Parce que Recaptcha n'est pas un input ou checkbox... C'est une div et ça pose problème, quelqu'un aurait une solution ? Merci ! :D
Voici le code que j'utilise:

    $("#voter").on('click', function () {
        swal({
            title: 'Multiple inputs',
            html: '<div class="g-recaptcha" data-sitekey="***"></div>',
            preConfirm: function() {
                return new Promise(function(resolve) {
                });
            }
        }).then(function(result) {
            swal(JSON.stringify(result));
        })
    });

Ce qui est bizarre, c'est que la doc indique que lorsque ce n'est pas un input ou une checkbox... On doit mettre html: " ", comme je l'ai fais. Sauf que bon voilà !

1 réponse

belgacea

Les captchas google sont générés par défaut après le chargement du DOM. Comme ton div est chargé dans le DOM après (= à l'ouverture de la modal sweetalert), le captcha n'est pas généré automatiquement. Tu dois le générer explicitement à l'ourverture de ta modal. L'option onOpen de sweetalert2 est faite pour ça :

var renderCaptcha = function() {
        var captchaKey = '***';
        grecaptcha.render('captcha', {
            'sitekey': captchaKey,
        });
 }

$("#voter").on('click', function () {
        swal({
            title: 'Multiple inputs',
            html: '<div id="captcha"/>',
            onOpen: renderCaptcha,
            preConfirm: function() {
                return new Promise(function(resolve) {
                });
            }
        }).then(function(result) {
            swal(JSON.stringify(result));
        })
    });

Source : Google