is it possible to make one click fires two events or more by javascript?

Question

I am currently making a temporary download page for website visitor.

The page includes a form, after the visitor fills the form up, the site will take them to the pdf download page.

In the download page, there are some pdf files download links (I am just using a tag.). However, i wanna make a onclick event to those links, once they have been clicked, the page will refresh automatically or redirect to other pages.

<a href="/file.pdf" onClick="window.location.reload()">The File</a>

I have tried the jquery way as well.

<a href="/file.pdf" id="FileDownload">The File</a>
<script>
   $("#FileDownload").click(function(){
         location.reload();
   });
</script>

But all the them are not working. Do you masters have any good ideas about this, many thanks.

PS What if I wanna add a countdown after a file is being started download, and then do page reload when countdown finishes.

Looks like have asked several questions... Thanks a ton in advance.

Answer 1

This works:

http://jsbin.com/imikit/5

The timeout must be set to more than the response time of the server serving the file, otherwise the javascript won't fire. So set it to something high.

<a href="http://ipv4.download.thinkbroadband.com/1GB.zip" id="download">The File</a>

$('#download').click(function() {
  setTimeout(function() {
    window.location = 'http://www.google.com/';
  }, 1000);
});

Or

<a href="http://ipv4.download.thinkbroadband.com/1GB.zip" id="download" target="_blank">The File</a>

$('#download').click(function() {
  window.location = 'http://www.google.com/';
});

Most browsers will close the newly opened window once the download has initiated.

---

Lighttpd 2's mod_upload might be worth looking at. Unfortunately there's no stable version of Lighttpd 2 yet.

---

You could try sending a cookie along with the download, then detecting it with javascript. This will either be set after the headers are sent, or after the body is sent. (test it)

Answer 2

You have two options for the onClick parameter:

1. Add semicolons between each line that can have one

2. Write a function to do all your tasks an have the onClick method call that.

Someone else might be able to help with the jQuery side, but it would be similar, I would think.

All of these methods will fire as many events as you like.

For the countdown, try the setTimeout() function.

EDIT: After seeing comments, try <a href="file.pdf" target="_blank" onClick="window.location.reload()">Click Here</a> . This will open the link in a popup window and reload the current one - you may need the setTimeout() for the reload so the link opens before the reload() event fires.

Answer 3

One thing you can do is open the download in a new window, then redirect the page.

<a href="/file.pdf" id="FileDownload">The File</a>
<script>
   $("#FileDownload").click(function(e){
       e.preventDefault();
       window.open(this.href);
       location.reload();
   });
</script>

Answer 4

When you click on a link the default action is to follow it and adding onClick code doesn't change that.

Try: onClick="windows.location.reload();return false;"

This will solve the first part.

As for the second part (counter/redirect on download finish) use this plugin http://johnculviner.com/post/2012/03/22/Ajax-like-feature-rich-file-downloads-with-jQuery-File-Download.aspx to download the file and use successCallback to redirect:

$.fileDownload('/file.pdf', {
    successCallback: function () { 
         windows.location.reload();
    }
});