Javascript Sweet Alert and html link inside text

Question

i have the following SweetAlert Code..

Answer 1

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 2

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 3

Found this answer here, all credits to Tristan Edwards

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})

Answer 4

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 5

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