Sweetalert: Como adicionar html personalizado ao swal

Oi @srikanthcx

Esta solução funciona para você?

Não, eu preciso passar o html dinâmico, a solução acima não funcionará para mim, obrigado.

Algo assim funcionaria?

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

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

perfeito, mas funcionará uma vez porque, se você executar a segunda vez, está dizendo que o wrapper já está declarado.

Você pode envolver tudo acima em uma função que recebe o html dinâmico como argumento.
Então, você pode simplesmente chamar a função com seu html em vez de chamar swal diretamente.

eu estava tentando algo assim

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"
});

Você pode tentar isso:

(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"
  });
})();

Se isso não funcionar, vou precisar de mais contexto. Poderia me fornecer um exemplo mais claro?

Obrigado @lionralfs , isso não funciona para mim vou usar sweetalert2.

@srikanthcx Parece que você está tentando usar o código de modelagem ERB em seu HTML personalizado. Isso não funcionará no SweetAlert nem em nenhum de seus forks, já que o SweetAlert é uma biblioteca do lado do cliente. Se você quiser que isso funcione, você terá que renderizar seu código ERB em algum outro elemento HTML e cloná-lo no modal Swal.

@ t4t5 A mesma coisa que eu estava fazendo. No arquivo js.erb estou fazendo o código abaixo. Ele dará a saída html. Nenhum problema com o código erb. Mas o problema é que o swal não está pegando código 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 eu vejo. Nesse caso, a solução do @lionralf deve funcionar bem. Basta usar var wrapper = ... em vez de const wrapper = ... e acho que a mensagem de erro que você encontrou deve desaparecer.

Eu estou supondo que o bloco de código acima é chamado várias vezes. É por isso que eu recomendei extraí-lo em uma chamada de função como esta:

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

E substituindo cada ocorrência de swal(...) por callSwalWithHTML(...) .

Eu estava esperando um pouco mais de contexto sobre por que o código está sendo chamado várias vezes (caso contrário, por que diria wrapper is already defined ?)

Use este pacote, https://amjadiqbal.github.io/sweetalert/forms.html
guia de vídeos incluído

como usamos a âncora no sweetalert ??

ei @Sudangadekar veja este guia de formulários, você pode incluir qualquer html dentro do sweetalert, https://amjadiqbal.github.io/sweetalert/forms.html