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.

instead of `preventDefault`, use a callback function that you want to execute on success. — Rajesh, Nov 04 '15 at 13:03
If you don't want the user downloading `file.csv` without your ajax function being called first, you need **not** to have that link there, full stop, until/unless you've decided to let them download it. The user can do all kinds of things with that link without triggering your ajax call. You also need to implement the download block **server-side**. — T.J. Crowder, Nov 04 '15 at 13:04
I can't even understand why you would want to do this. Once the file is downloaded why would you want to just continuously download it over and over? If there were a check for an update I could understand, but this I don't get... — Brad Evans, Nov 04 '15 at 13:08
@T.J.Crowder Thanks but this is a trusted users environment, they have no interest of doing so. — kursus, Nov 04 '15 at 13:12
@BradEvans I'm not sure the code does what you think it does. — kursus, Nov 04 '15 at 13:12

Stevanicus · Accepted Answer · 2015-11-04T13:29:56.627

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.

P.s. 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.

Thanks first solution works perfectly. As for the flag see the linked answer in the question. — kursus, Nov 04 '15 at 13:24
I get it. You want to stop the Ajax from firing more than once per click. — Stevanicus, Nov 04 '15 at 13:32

score 0 · Answer 2 · answered Nov 04 '15 at 13:02

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
        }
    });
});

score 0 · Answer 3 · answered Nov 04 '15 at 13:26

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 (i.e. direct link, or through Ajax), so we can help you.

jQuery rebind click event after ajax call

3 Answers3