Sweetalert: Cómo agregar html personalizado a swal

Hola @srikanthcx

¿Te funciona esta solución?

No, necesito pasar html dinámico, la solución anterior no funcionará para mí, gracias.

Algo como esto funcionaría?

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

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

perfecto, pero funcionará una vez porque, si ejecuta la segunda vez, dice que el contenedor ya está declarado.

Podría envolver todo lo anterior en una función que tome el html dinámico como argumento.
Luego, puede simplemente llamar a la función con su html en lugar de llamar a swal directamente.

estaba intentando algo como esto

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

Puedes probar esto:

(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 eso no funciona, necesitaré más contexto. ¿Podrías darme un ejemplo más claro?

Gracias @lionralfs , esto no me funciona, usaré sweetalert2.

@srikanthcx Parece que está tratando de usar el código de plantilla ERB en su HTML personalizado. Eso no funcionará en SweetAlert ni en ninguna de sus bifurcaciones, ya que SweetAlert es una biblioteca del lado del cliente. Si desea que esto funcione, deberá representar su código ERB en algún otro elemento HTML y luego clonarlo en el modal Swal.

@ t4t5 Lo mismo que estaba haciendo. En el archivo js.erb que estoy haciendo debajo del código. Dará la salida html. No hay problema con el código erb. Pero el problema es que swal no está tomando el 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 Ya veo. En ese caso, la solución de @lionralf debería funcionar bien. Simplemente use var wrapper = ... en lugar de const wrapper = ... y creo que el mensaje de error que encontró debería desaparecer.

Supongo que el bloque de código anterior se llama varias veces. Es por eso que recomendé extraerlo en una llamada de función como esta:

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

Y reemplazando cada ocurrencia de swal(...) con callSwalWithHTML(...) .

Esperaba más contexto sobre por qué el código se llama varias veces (de lo contrario, ¿por qué diría wrapper is already defined ?)

Use este paquete, https://amjadiqbal.github.io/sweetalert/forms.html
guía de videos incluida

¿Cómo usamos la etiqueta de anclaje en Sweetalert?

hola @Sudangadekar mira esta guía de formularios, puedes incluir cualquier html dentro de sweetalert, https://amjadiqbal.github.io/sweetalert/forms.html