CODEWITHSUNDEEP
javascriptjqueryhtml
Clain Dsilva
Clain Dsilva

Reputation: 1651

Trigger click event on an audio download link

<a href="http://www.somesite.com/sometrack.mp3" onclick="trackDownload('sometrack.mp3')">
    <button> Download </button>
</a>

I need to trigger a download as well as trigger the JavaScript function trackDownload().

trackDownload() is an Ajax function, so ideally after completing the ajax call we need to trigger the download.

But unfortunately this does not happen. I believe its because the page navigates to the download link.

Is there a workaround? I did think of a JS function that does the tracking and redirect to link. But thought of taking a second opinion to stack overflow experts.

Upvotes: 0

Views: 3484

Answers (3)

Clain Dsilva
Clain Dsilva

Reputation: 1651

Thanks for all the answers , It definitely did enlightened my hunt for the best solution.

@Raunak's answer is did find a solution for my question but the use of 

onclick="return false;"

on the anchor tag is however is not a right solution. Since it triggered multiple events on the Jquery dom engine.

What I really need was to prevent the default action of the link and call the ajax function.

So I have added event.preventDefault(); on the click event followed by the ajax function and loaded the download address after on the success event of ajax call.

  $('#container a').click(function(event){
     event.preventDefault(); // This is what is different from @Raunak's answer

     var el = $(this); // $(this).href may not be valid inside ajax function
                       // due to disambiguation of $(this) 
                       // hence storing the element on a local veriable

     $.post('http://someURL', { info: someInfo})
     .done(function(data) {
        location.href = el.attr('href');
     });

  });

Upvotes: 0

Raunak Kathuria
Raunak Kathuria

Reputation: 3215

What can you do is attach even to button instead if link and return false for anchor

HTML

<a href="http://www.somesite.com/sometrack.mp3" onclick="return false;">
    <button id="button"> Download </button>
</a>

Jquery

$(function () {
    $('#button').on('click', function () {
        trackDownload();
        alert($(this).parents('a').attr('href'));
        window.location = $(this).parents('a').attr('href');
    });
});

function trackDownload() {
    alert('Track is getting download');
}

if you want to open in new tab use window.open($('#myanchor').attr('href'));

DEMO

As specified that trackDownload() in comments that it is ajax function what you can do is 

   $('#button').on('click', function () {
        trackDownload($(this).parents('a')); // pass your link to this function

    });

function trackDownload(element) {
  $.ajax(
       url: 'yoururl',
       type: 'post',
       ... // all other parameter you want to pass
       success: function () { // success when ajax is completed
           window.location = element.attr('href'); // change url only when ajax is success
       }
}

But if you want to attach click event to link only then you can do the same, just attache the event to link

<a id='music' href="http://www.somesite.com/sometrack.mp3" onclick="return false;">
     <button> Download </button>
</a>

JS

   $(function () {
        $('#music').on('click', function () {
            trackDownload();
            alert($(this).attr('href'));
            window.location = $(this).attr('href');
        });
    });

You can also look at this for more alternatives How can I simulate a click to an anchor tag?

Upvotes: 1

ReNiSh AR
ReNiSh AR

Reputation: 2852

<a href="#" onclick="trackDownload('sometrack.mp3')">
    <button> Download </button>
</a>

<script>
    function trackDownload(file)
    {
        // other function body here....
        window.open('http://www.somesite.com/'+file, '_blank');
    }
</script>

Upvotes: 0

Related Questions