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 Dixit
– Rajesh Dixit, Commented Nov 4, 2015 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
– T.J. Crowder, Commented Nov 4, 2015 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
– Brad Evans, Commented Nov 4, 2015 at 13:08
@T.J.Crowder Thanks but this is a trusted users environment, they have no interest of doing so. — kursus
– kursus, Commented Nov 4, 2015 at 13:12
@BradEvans I'm not sure the code does what you think it does. — kursus
– kursus, Commented Nov 4, 2015 at 13:12

Stevanicus · Accepted Answer · 2015-11-04 13:29:56Z

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.

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.

edited Nov 4, 2015 at 13:29

answered Nov 4, 2015 at 13:17

Stevanicus

7,7819 gold badges52 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kursus Over a year ago

Thanks first solution works perfectly. As for the flag see the linked answer in the question.

Stevanicus Over a year ago

I get it. You want to stop the Ajax from firing more than once per click.

madalinivascu · Accepted Answer · 2015-11-04 13:02:31Z

0

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

answered Nov 4, 2015 at 13:02

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Comments

Racil Hilan · Accepted Answer · 2015-11-04 13:26:19Z

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.

Collectives™ on Stack Overflow

jQuery rebind click event after ajax call

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related