Sweetalert: Comment ajouter du code HTML personnalisé à swal

Salut @srikanthcx

Cette solution vous convient-elle ?

Non, j'ai besoin de passer du HTML dynamique, la solution ci-dessus ne fonctionnera pas pour moi, merci.

Est-ce que quelque chose comme ça fonctionnerait?

const wrapper = document.createElement('div');
wrapper.innerHTML = YOUR_DYNAMIC_HTML;

swal({
  title: 'Test Title',
  text: 'Test Text',
  content: wrapper
});

parfait mais cela fonctionnera une fois car, si vous exécutez la deuxième fois, cela signifie que le wrapper est déjà déclaré.

Vous pouvez envelopper tout ce qui précède dans une fonction qui prend le HTML dynamique comme argument.
Ensuite, vous pouvez simplement appeler la fonction avec votre html au lieu d'appeler swal directement.

J'essayais quelque chose comme ça

var errors = "<ul class='error-list'><% @user.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>";
swal({
      title: "Error!",
      content: errors, 
      icon: "error"
});

Peux-tu essayer ceci :

(function() {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = "<ul class='error-list'><% @user.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>";
  swal({
    title: "Error!",
    content: wrapper, 
    icon: "error"
  });
})();

Si cela ne fonctionne pas, j'aurai besoin de plus de contexte. Pourriez-vous me donner un exemple plus clair?

Merci @lionralfs , cela ne fonctionne pas pour moi, je vais utiliser sweetalert2.

@srikanthcx Il semble que vous essayez d'utiliser le code de modèle ERB dans votre code HTML personnalisé. Cela ne fonctionnera pas dans SweetAlert ni dans aucun de ses forks puisque SweetAlert est une bibliothèque côté client. Si vous voulez que cela fonctionne, vous devrez rendre votre code ERB dans un autre élément HTML, puis le cloner dans le modal Swal.

@ t4t5 La même chose que je faisais. Dans le fichier js.erb, je fais le code ci-dessous. Il donnera la sortie html. Pas de problème avec le code erb. Mais le problème est que swal ne prend pas de code html.

var errors = "<ul class='error-list'><% @user.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>";
swal({
      title: "Error!",
      content: errors, 
      icon: "error"
});

@srikanthcx je vois. Dans ce cas, la solution de @lionralf devrait fonctionner correctement. Utilisez simplement var wrapper = ... au lieu de const wrapper = ... et je pense que le message d'erreur que vous avez rencontré devrait disparaître.

Je suppose que le bloc de code ci-dessus est appelé plusieurs fois. C'est pourquoi j'ai recommandé de l'extraire dans un appel de fonction comme celui-ci :

function callSwalWithHTML(html) {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;
  swal({
    title: "Error!",
    content: wrapper, 
    icon: "error"
  });
}

Et en remplaçant chaque occurrence de swal(...) par callSwalWithHTML(...) .

J'espérais un peu plus de contexte pour expliquer pourquoi le code est appelé plusieurs fois (sinon, pourquoi dirait-il wrapper is already defined ?)

Utilisez ce package, https://amjadiqbal.github.io/sweetalert/forms.html
guide vidéo inclus

comment utilisons-nous la balise d'ancrage sur sweetalert ??

hey @Sudangadekar voir ce guide de formulaires, vous pouvez inclure n'importe quel html dans sweetalert, https://amjadiqbal.github.io/sweetalert/forms.html