Sweetalert: swal में कस्टम html कैसे जोड़ें

अरे @srikanthcx

क्या यह समाधान आपके लिए काम करता है?

नहीं, मुझे गतिशील एचटीएमएल पास करने की ज़रूरत है, उपरोक्त समाधान मेरे लिए काम नहीं करेगा, धन्यवाद।

क्या ऐसा कुछ काम करेगा?

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

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

बिल्कुल सही लेकिन यह एक बार काम करेगा क्योंकि, यदि आप दूसरी बार दौड़ते हैं तो यह कह रहा है कि रैपर पहले ही घोषित हो चुका है।

आप उपरोक्त सब कुछ एक ऐसे फ़ंक्शन में लपेट सकते हैं जो गतिशील HTML को तर्क के रूप में लेता है।
फिर, आप सीधे 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"
});

क्या आप इसे आजमा सकते हैं:

(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-तत्व में प्रस्तुत करना होगा, फिर उसे स्वाल मोडल में क्लोन करना होगा।

@ t4t5 वही काम जो मैं कर रहा था। Js.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 का समाधान ठीक काम करना चाहिए। $#$ const wrapper = ... $#$ के बजाय बस var 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