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 modal.

@ 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
وشملت دليل الفيديو

كيف نستخدم علامة المرساة في سويتالرت ؟؟

مرحبا Sudangadekar انظر دليل النماذج هذا يمكنك تضمين أي html داخل sweetalert ، https://amjadiqbal.github.io/sweetalert/forms.html