jQuery rebind click event after ajax call

Question

I'm trying to prevent defaults on a click, call a page with ajax and trigger the click on complete, using this answer .

<a id="mylink" href="file.csv" download >Dowload</a>

<script>
var flag = false;
$('#mylink').on('click',function(e) {
// Result is the same with :
//$(document).on("click","#mylink",function(e){

    if (flag === true) {
        flag = false;
        return;
    }
    e.preventDefault();

    $.ajax({
        url: "index.php?controller=admin&action=refreshFile",
        complete: function() {
        console.log('control'); // This is called 
        flag = true;
        $('#mylink').trigger('click'); // This is not called
        }
    });
});
</script>

The call works but the link is not triggered after. The result is the same when the ajax call is set inside a separate function.

Answer 1

use window.location to call the link href

$('#mylink').on('click',function(e) {
    e.preventDefault();

    $.ajax({
        url: "index.php?controller=admin&action=refreshFile",
        complete: function() {
            console.log('control'); // This is called 
            window.location = $('#mylink').attr("href");
        }
    });
});

or with one event listeners

var eventListener = function(e) {
        e.preventDefault();

        $.ajax({
            url: "index.php?controller=admin&action=refreshFile",
            complete: function() {
                console.log('control'); // This is called 
                $('#mylink')[0].click();
                $('#mylink').one('click', eventListener);
            }
        });
    };
$('#mylink').one('click', eventListener);

I'm not sure what your flag is supposed to do. In your example it would mean the link only works every 2nd click.

Ps Using the complete callback means it also works even when the ajax fails. You might want to change it to success .

Update

@Racil Hilan has a point: this solution is a little overkill when you could just call the link directly and return the correct file after the refreshFile action has been called.

Answer 2

TRy

var flag = false;
$('#mylink').on('click',function(e) {
// Result is the same with :
//$(document).on("click","#mylink",function(e){

    if (flag === true) {

        flag = false;
        windows.location="file.csv";
    }
    e.preventDefault();

    $.ajax({
        url: "index.php?controller=admin&action=fileDownload",
        complete: function() {
        console.log('control'); // This is called 
        flag = true;
        $('#mylink').trigger('click'); // This is not called
        }
    });
});

Answer 3

In my humble opinion, this is not the right design. Your Ajax is calling the index.php on the server before triggering the download. If the index.php is doing some security or critical stuff that MUST be done before allowing the user to download the file, then this design is absolutely insecure. You don't even need to be a hacker, simply copy the link file.csv and paste it in your browser's address bar, and you'll get the file without the Ajax.

You need to place the file.csv file outside your website folder (or maybe it is generated on the fly by the server code, so that' good too) and then the PHP page must run all the checks and if all run OK, it reads the file (or generate it) and returns the download to the browser (or an error message if the checks failed). This is how to secure file downloads on the server.

After doing all of that, it is a matter of preference whether you call the PHP directly from your link, or the link calls the Ajax function which in turn calls the PHP page and parse the download (this is a bit more complex, but doable). The only difference between the two methods is whether you want the page refreshed when the download (or error message) come back from the server.

If you want to take this advice, rephrase your question and select which way you want to go (ie direct link, or through Ajax), so we can help you.