Sweetalert: Bagaimana cara menambahkan html khusus ke swal

Hai @srikanthcx

Apakah solusi ini bekerja untuk Anda?

Tidak, saya harus melewati html dinamis, solusi di atas tidak akan berfungsi untuk saya, terima kasih.

Apakah sesuatu seperti ini akan berhasil?

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

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

sempurna tetapi itu akan berhasil satu kali karena, jika Anda menjalankan kedua kalinya dikatakan pembungkus sudah dideklarasikan.

Anda bisa membungkus semuanya di atas dalam fungsi yang menggunakan html dinamis sebagai argumen.
Kemudian, Anda bisa memanggil fungsi dengan html Anda alih-alih memanggil swal secara langsung.

Saya mencoba sesuatu seperti ini

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

Bisakah Anda mencoba ini:

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

Jika itu tidak berhasil, saya akan membutuhkan lebih banyak konteks. Bisakah Anda memberi saya contoh yang lebih jelas?

Terima kasih @lionralfs , ini tidak berhasil untuk saya, saya akan menggunakan sweetalert2.

@srikanthcx Sepertinya Anda mencoba menggunakan kode templat ERB di HTML khusus Anda. Itu tidak akan berfungsi di SweetAlert atau garpunya karena SweetAlert adalah perpustakaan sisi klien. Jika Anda ingin ini berfungsi, Anda harus merender kode ERB Anda di beberapa elemen HTML lain, lalu mengkloningnya ke modal Swal.

@t4t5 Hal yang sama saya lakukan. Dalam file js.erb saya melakukan kode di bawah ini. Ini akan memberikan output html. Tidak ada masalah dengan kode erb. Tetapi masalahnya adalah swal tidak mengambil kode 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 saya mengerti. Dalam hal ini, solusi @ lionralf akan berfungsi dengan baik. Cukup gunakan var wrapper = ... alih-alih const wrapper = ... dan saya pikir pesan kesalahan yang Anda temui akan hilang.

Saya menduga bahwa blok kode di atas dipanggil beberapa kali. Inilah sebabnya saya merekomendasikan untuk mengekstraknya menjadi panggilan fungsi seperti ini:

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

Dan mengganti setiap kemunculan swal(...) dengan callSwalWithHTML(...) .

Saya berharap lebih banyak konteks tentang mengapa kode dipanggil beberapa kali (jika tidak, mengapa dikatakan wrapper is already defined ?)

Gunakan paket ini, https://amjadiqbal.github.io/sweetalert/forms.html
panduan video disertakan

bagaimana kita menggunakan tag jangkar di sweetalert ??

hey @Sudangadekar lihat panduan formulir ini, Anda dapat memasukkan html apa pun di dalam sweetalert, https://amjadiqbal.github.io/sweetalert/forms.html