Javascript Sweet Alert and html link inside text

Question

i have the following SweetAlert Code..

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']}`