14

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!

Community
  • 1
  • 1
CheeHow
  • 875
  • 4
  • 12
  • 27
  • I think you're going to have to break up the functionality. I'd recommend getting rid of the href and have the update() call write to the database then pop a window to download the file. – Snowburnt Oct 08 '13 at 14:38
  • you could work with a delay in your update() function, use a setTimeout(function(){}) – john Smith Oct 08 '13 at 14:38
  • First `click` and then `href`. Its a default behaviour – Murali Murugesan Oct 08 '13 at 14:39
  • @johnSmith that's exactly what i am doing at this moment. But this is not a consistent solution as sometimes the timeout function is not called – CheeHow Oct 08 '13 at 14:43
  • Can you include the code for your `update` function? – Anthony Grist Oct 08 '13 at 14:54
  • @AnthonyGrist the method will update the page by retrieving data from server via http get method. Pardon me that it includes some sensitive data that i choosed not to disclose. It will have 2 request being fired at the same time and only 1 get response if check from chrome development tool – CheeHow Oct 08 '13 at 15:03

1 Answers1

24

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

musefan
  • 47,875
  • 21
  • 135
  • 185
  • 6
    I'd leave the `href` as it was previously, then use `this.href` to update `window.location` in the event handler. If there are multiple download links per page (quite possible) then it's easier to switch to using a class, rather than ID selector, and also allows (partial) functionality for anybody who doesn't have JavaScript enabled. – Anthony Grist Oct 08 '13 at 14:46
  • @AnthonyGrist: Although, if the `update` code is done with a callback then `this` may lose its original meaning: I will update again – musefan Oct 08 '13 at 14:51
  • Didn't work for me. Just work without `e.preventDefault();` line. – ed1nh0 Dec 10 '18 at 11:26