Sweetalert: 如何将自定义 html 添加到 swal

嘿@srikanthcx

这个解决方案对你有用吗？

不，我需要传递动态 html，上面的解决方案对我不起作用，谢谢。

像这样的东西会起作用吗？

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

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

完美，但它会工作一次，因为如果你第二次运行它说包装器已经被声明。

您可以将上面的所有内容包装在一个以动态 html 作为参数的函数中。
然后，您可以只使用您的 html 调用该函数，而不是直接调用 swal。

我正在尝试这样的事情

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

你可以试试这个：

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

如果这不起作用，我将需要更多上下文。 你能给我一个更清楚的例子吗？

谢谢@lionralfs ，这对我不起作用，我将使用 sweetalert2。

@srikanthcx看起来您正在尝试在自定义 HTML 中使用 ERB 模板代码。 这在 SweetAlert 及其任何分支中都不起作用，因为 SweetAlert 是一个客户端库。 如果你想让它工作，你必须在其他一些 HTML 元素中呈现你的 ERB 代码，然后将其克隆到 Swal 模式中。

@t4t5我在做同样的事情。 在 js.erb 文件中，我正在执行以下代码。 它将给出 html 输出。 erb代码没有问题。 但问题是 swal 没有采用 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我明白了。 在这种情况下，@lionralf 的解决方案应该可以正常工作。 只需使用var wrapper = ...而不是const wrapper = ... ，我认为您遇到的错误消息应该会消失。

我猜上面的代码块被多次调用。 这就是为什么我建议将其提取到这样的函数调用中：

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

并用 callSwalWithHTML(...) 替换每次出现的swal(...) callSwalWithHTML(...) 。

我希望有更多关于为什么多次调用代码的上下文（否则，为什么会说wrapper is already defined ？）

使用这个包， https://amjadiqbal.github.io/sweetalert/forms.html
包括视频指南

我们如何在 sweetalert 上使用锚标签？

嘿@Sudangadekar看到这个表单指南，你可以在 sweetalert 中包含任何 html， https: //amjadiqbal.github.io/sweetalert/forms.html