How to add custom html to swal

[srikanthcx]

I was trying to add custom html to swal, but it's not taking the html. What was the solution for the above. Please help me on this. Thanks

[lionralfs]

Hey @srikanthcx

Does this solution work for you?

[srikanthcx]

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

[lionralfs]

Would something like this work?

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

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

[srikanthcx]

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

[lionralfs]

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.

[srikanthcx]

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

[lionralfs]

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?

[srikanthcx]

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

[t4t5]

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

[srikanthcx]

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

[t4t5]

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

[lionralfs]

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?)

[Sudangadekar]

how we use anchor tag on sweetalert??

[kiditran]

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?

Thank you so much. I just try and done it with https://sweetalert.js.org/

[arcahyadi]

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?

thx for the trick