Javascript Sweet Alert and html link inside text

Question

i have the following SweetAlert Code..

<script type="text/javascript" charset="utf-8">
    $('.patient-details').click(function(e) {
        e.preventDefault();
        var name = $(this).attr('data-name');
        var gender = $(this).attr('data-gender');
        var age = $(this).attr('data-age');
        var country = $(this).attr('data-country');
        var state = $(this).attr('data-state');
        var address = $(this).attr('data-address');
        var report = $(this).attr('data-report');
        swal({
            title: name,
            text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
            confirmButtonColor: "#00B4B4",
            imageUrl: "images/avatar/user.png",
        });
    });
</script>

The var report is a link and i need the link displayed in the modal. I tried html: true etc. html is no longer used. Instead use the content object. as doc says:

https://sweetalert.js.org/docs/#content

https://sweetalert.js.org/guides/

But i as a newbie is unable to make sense out of it.

Requesting help on how to display the link in the modal and the link to be opened in new window.

Update: Since the solutions provided were not working i used another approach using html to resolve it. Need to remove text, else text will be default. Codepen link: https://codepen.io/pamela123/pen/GOJZgo

Answer 1

As the doc says, html is deprecated and no longer works.

They have replaced html with content, which is not a string any longer, but an Object.

This content object looks like this :

content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    }
  }

So I guess you can build your own link like this :

content: {
    element: "a",
    attributes: {
      href : report
    }
  }

...and then simply pass the content object to swal :

swal({
 content: {
        element: "a",
        attributes: {
          href : report
        }
 }
})

Note that this is untested, I'm not sure if element:"a" works. But anyway, the doc gives a better way :

var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider
});

So you can create a link this way :

var link = document.createElement("a");
link.href= report;

swal({
  content: link
});

As an aside, you can heavily optimize the code you provided in your question by caching $(this) (which is expensive to create) and reuse it. Also, .attr("data-x") has a shorthand, .data("x").

var $this = $(this)
var name = $this.data('name');
var gender = $this.data('gender');
var age = $this.data('age');
var country = $this.data('country');
var state = $this.data('state');
var address = $this.data('address');
var report = $this.data('report');

OR even better :

var attributes = $(this).data()

which gives an object containing all your data attributes. Which you can then reach using :

text: "Gender: " + attributes['gender'] +"\n" + "Age: " + attributes['age'] +"\n" + "Country: " + attributes['country'] +"\n" + "State: " + attributes['state'] +"\n" + "Address: " + attributes['address'] +"\n" + "Report: " + attributes['report']

Or in ES6 :)

text: `Gender: ${attributes['gender']}\n
        Age: ${attributes['age']}\n
        Country: ${attributes['country']}\n
        State: ${attributes['state']}\n
        Address: ${attributes['address']}\n
        Report: ${attributes['report']}`

Answer 2

Why not try the following (I have never used sweet alert, but after reading the documentation this is what I would try)

var link= document.createElement("a");
link.href =  report  // or link.setAttribute("href", report)


swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
content:link
});
});

Or

swal({
    title: name,
    text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
    confirmButtonColor: "#00B4B4",
    imageUrl: "images/avatar/user.png",
    content:{
      element:"a",
      attributes:{
        href:report
      }
     }
    });
    });

hope that helps

Answer 3

If you are not still able to find a solution, I tried recreating the modal https://codepen.io/AJALACOMFORT/pen/zPGqNe?editors=0010

window.onload= function(){
  var that = $(".patient-details")
  var name = $(that).attr('data-name');
var gender = $(that).attr('data-gender');
var age = $(that).attr('data-age');
var country = $(that).attr('data-country');
var address = $(that).attr('data-address');
var report = $(that).attr('data-report');

   //creates h2
    var h2 = document.createElement("h2")
        //adds text
        h2.innerHTML = name
  //creates p tag 
    var p = document.createElement("p")
         p.innerHTML =  "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n"  + "Address: " + address +"\n" + "Report: " + report
  //creates button
  var button = document.createElement("button")
    //adds the onclick function
      button.setAttribute("onclick", "callbutton(event)")
  button.innerHTML ="ok"
  button.className += "confirm"
  var link = document.createElement("a")
      link.setAttribute("href", report)
      link.innerHTML ="Link"
      link.className += "report-link"
  //appends all the elements into the mymodal div
  var modal = document.getElementById("modal-inner")
        modal.appendChild(h2)
          modal.appendChild(p)
          modal.appendChild(link)
        modal.appendChild(button)


}
 //listens to click event of the checkbox
  function callbutton(){
      document.getElementById("checkboxabove").checked = false;
  }

Hopefully it helps. (Note I did not use the same transition effect like in sweet alert, so adjust as you please)

Answer 4

As Jeremy Thille found out in his commentary on Oct. 31 '17 at 10:36:

You do not need to use the option "content" for a simple link in the text. The option "text" can only display pure text, no html. However, the option "html" can display html.

Not to be confused with the old version SweetAlert 1.X: There you had to set html = true.

In SeewtAlert2, the html is set directly in the "html" option. Do not use option "text" in this case.

Works fine in sweetAlert.version = '6.9.1';

Example of Jeremy Thille:

$('.patient-details').click(function(e) {
  e.preventDefault();
  var $this = $(this)
  var name = $this.data('name');
  var gender = $this.data('gender');
  var age = $this.data('age');
  var country = $this.data('country');
  var address = $this.data('address');
  var report = $this.data('report');

  swal({
  title: name,
  html:
      "Gender: " + gender +"<br>" +
     "Age: " + age +"<br>" +
     "Country: " + country +"<br>" +
     "Address: " + address +"<br>" +
     "Report: " + report +"<br>" +
      "<a href='report'>Report</a> " +
     "and other HTML tags"
  });
});

https://codepen.io/jeremythille/pen/wPazMw