CODEWITHSUNDEEP
javascriptjqueryfirefoxcross-browser
Kokizzu
Kokizzu

Reputation: 26908

Make jQuery click anchor work on Firefox

I have this script:

function downloadIt() {
  var dataUri = "data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
  var filename = "somedata.csv"
  $("<a download='" + filename + "' href='" + dataUri + "'></a>")[0].click();
}

It works on Chrome but doesn't work on Firefox, without any error on the console. What is the cause and how to fix this?

Upvotes: 3

Views: 801

Answers (1)

Kokizzu
Kokizzu

Reputation: 26908

Appending the element on the body solves the problem, just replace line 3 on the question above into this:

// store the element to a variable
var x = $("<a download='" + filename + "' href='" + dataUri + "'></a>");

// append to body
x.appendTo('body');

// click it (download)
x[0].click();

// remove from body
x.remove();

It seems that firefox won't execute the click event when the element not attached to the body

Upvotes: 5

Related Questions