Sweetalert: How to add custom html to swal

Hey @srikanthcx

Does this solution work for you?

No i need to pass dynamic html, above solution won't work for me, thanks.

Would something like this work?

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

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

perfect but it will work one time because, if you run second time it's saying wrapper is already declared.

You could wrap everything above in a function that takes the dynamic html as an argument.
Then, you can just call the function with your html instead of calling swal directly.

I was trying something like this

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

Can you try this:

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

If that doesn't work, I will need some more context. Could you provide me with a clearer example?

Thanks @lionralfs , this doesn't work for me i will use sweetalert2.

@srikanthcx It looks like you’re trying to use ERB templating code in your custom HTML. That’s not going to work in SweetAlert nor any of its forks since SweetAlert is a client-side library. If you want this to work, you’ll have to render your ERB code in some other HTML-element, then clone that into the Swal modal.

@t4t5 Same thing i was dooing. In js.erb file i am doing below code. It will give the html output. No issue with erb code. But issue is swal is not taking html code.

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 I see. In that case, @lionralf’s solution should work fine. Just use var wrapper = ... instead of const wrapper = ... and I think the error message you encountered should go away.

I'm guessing that the code block above is called multiple times. This is why I recommended extracting it into a function call like this:

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

And replacing every occurence of swal(...) with callSwalWithHTML(...).

I was hoping for some more context as to why the code is being called multiple times (otherwise, why would it say wrapper is already defined?)

Use this package , https://amjadiqbal.github.io/sweetalert/forms.html
videos guide included

how we use anchor tag on sweetalert??

hey @Sudangadekar see this forms guide you can include any html inside sweetalert , https://amjadiqbal.github.io/sweetalert/forms.html