1

estou querendo que ao clicar no botão de download, o js acesse o endpoint que possui o caminho correto do arquivo e comece o download. O que fiz ate que funciona, mas acontece que ele vai sempre "atrasado".

exemplo:
no primeiro clique, ele não baixa nada
no segundo clique , baixa o primeiro arquivo no terceiro clique baixa o segundo arquivo

Eu não posso deixar o primeiro fixo la pois o arquivo é gerado na hora do clique, com um nome aleatório.

Como faço para que ele funcione certinho?

segue meu código js e html

$("#download").click(function(e) {
    e.preventDefault();  //stop the browser from following
    $.getJSON("/get-path", function (path) {
        $("#download").attr("href", path);
    });
});

<a  href="#" download style="text-decoration:none;" id="download_csv">
                                <label id="download_button" class="btn btn-info"><i class="fas fa-file-download"></i> <strong>Download</strong></label>
                            </a>

1 Resposta 1

2

Use o método .on() do jQuery que dispara o evento apenas uma vez. Ao disparar o evento, além de alterar o atributo href com o retorno do Ajax, insira também um atributo onclick apontando e disparando um click no próprio elemento: onclick="this.click()". Isso fará com que o click manual após o retorno do Ajax funcione e em seguida remova o atributo.

Após o retorno do Ajax, é preciso de um pequeno delay (atraso) para que dê tempo do clique reconheça os novos atributos e cria novamente o .on(). Veja abaixo com comentários explicativos:

function clique(e){
    e.preventDefault();  //stop the browser from following
    var $this = $(this); // guarda o elemento numa variável
    $.getJSON("/get-path", function (path) {
        $this
        .attr({
           "href": path, // altera o href
           "onclick": "this.click()" // adiciona o onclick
        });
        setTimeout(function(){ // delay de 1 centésimo de segundo
           $this
           .click() // dispara o click manual
           .removeAttr("onclick") // remove o atributo onclick
           .attr("href", "#") // reseta o href
           .one("click", clique); // cria o event handler novamente
        }, 10);
    });
}


$("#download_csv").one("click", clique); // event hanlder

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .