Html anchor tag onclick() and href execute simulta

Question

Similar to HTML anchor link - href and onclick both? post, mine is:

<a href="/tmp/download.mp3" onclick="update();">Download link</a>

The update() method would send another HTTP GET method to the server to update the which file has been downloaded and update the database. From the HTML code, there are 2 GET requests being triggered together and only ONE will get the response (the href download response) from the server. The update() is not being executed. Is there any method that i can get both GET methods to be executed? Javascript and Jquery suggestions are welcomed!

Answer 1

Forget about the href and just do it all in the click function. You can navigate to another page after the update is complete. Here is my JQuery suggestion:

HTML

<a id="download" href="/tmp/download.mp3">Download link</a>

JavaScript (with JQuery)

$("#download").click(function(e){
    e.preventDefault();//this will prevent the link trying to navigate to another page
    var href = $(this).attr("href");//get the href so we can navigate later

    //do the update

    //when update has finished, navigate to the other page
    window.location = href;
});

NOTE: I added in an id for the a tag to ensure it can be selected accurately via JQuery