CODEWITHSUNDEEP
javascriptjquerycsv
af_inb
af_inb

Reputation: 103

Trigger click n a element created in javascript and download csv file

I'm trying to create an a element and trigger click event on it and down load a csv file on ajax response( the data array its for test purposes only)

$(document).on('click','.csv',function(){

        var ticketid = $(this).attr('data-ticket'); 
        $.ajax({
          url: window.location.href,
          method:'POST',
          data: {
            action:"export-csv",
            ticketid: ticketid
          },
        }).done(function(response){
            var data = [
               ['Foo', 'programmer'],
               ['Bar', 'bus driver'],
               ['Moo', 'Reindeer Hunter']
            ];
            var response_object = $.parseJSON(response.html);
            var result = toArray(response_object);
            var csv = 'Name,Title\n';
            data.forEach(function(row) {
                    csv += row.join(',');
                    csv += "\n";
            });
            console.log( encodeURI(csv));
            var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
            hiddenElement.target = '_blank';
            hiddenElement.download = 'data.csv';
            hiddenElement.click();
        });
    });

With this code there is no error but there is not download too.

Upvotes: 3

Views: 1004

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Don't use trigger() on DOM object since it's a jQuery method, just .click() should do the work, Check the working example below :

 hiddenElement.click();

Hope this helps.

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8, ABCD';
hiddenElement.download = 'aaa.csv';
hiddenElement.click();

Upvotes: 1

UJS
UJS

Reputation: 861

You Must Use SetAttribute Method :

<script>
        var hiddenElement = document.createElement('a');
        hiddenElement.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURI(csv));
        hiddenElement.setAttribute("download", 'aaa.csv');
        hiddenElement.setAttribute("click", "DownloadFile(this)");

        function DownloadFile(e) {
            // Do Logic code here ..
        }
    </script>

Upvotes: 0

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

Triggering the click event of a link in via JS does not work - at least in Firefox (probably some kind of "security" restriction?). You'll have to create your own event and fire that:

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI('foo,bar,baz,42');
hiddenElement.download = 'aaa.csv';
hiddenElement.click();

var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
hiddenElement.dispatchEvent(event, true);

Depending on which browsers you need to support, you might have to do a feature detection for older browsers (IE), checking for document.createEventObject, then using hiddenElement.fireEvent('onclick').

Upvotes: 1

adeneo
adeneo

Reputation: 318302

Plain javascript doesn't have a trigger() method, only jQuery does.

To trigger a click you'd just do

hiddenElement.click();


var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI('John,2018,House,312,3.75');
hiddenElement.download = 'aaa.csv';
hiddenElement.click();

This does require a browser that supports the download attribute

Upvotes: 1

Related Questions