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 Похоже, вы пытаетесь использовать код шаблона ERB в своем пользовательском HTML. Это не будет работать ни в SweetAlert, ни в любом из его форков, поскольку SweetAlert является библиотекой на стороне клиента. Если вы хотите, чтобы это работало, вам нужно отобразить свой код ERB в каком-то другом HTML-элементе, а затем клонировать его в модальное окно 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"
  });
}

И замените каждое вхождение swal(...) на callSwalWithHTML(...) .

Я надеялся получить больше информации о том, почему код вызывается несколько раз (иначе, почему бы он сказал wrapper is already defined ?)

Используйте этот пакет, https://amjadiqbal.github.io/sweetalert/forms.html
руководство по видео включено

как мы используем тег привязки на sweetalert ??

эй , @Sudangadekar, посмотри это руководство по формам, ты можешь включить любой html внутри sweetalert, https://amjadiqbal.github.io/sweetalert/forms.html