CODEWITHSUNDEEP
javascriptjquery
user1078494
user1078494

Reputation: 509

jquery automatically click on multiple links

I have multiple links that are generated to allow customers to download files. All links are something like:

<a href="http://example.com/index.php?main_page=download&order=3&id=5" class="downloadLink">File 1</a>
<a href="http://example.com/index.php?main_page=download&order=3&id=6" class="downloadLink">File 2</a>
<a href="http://example.com/index.php?main_page=download&order=3&id=7" class="downloadLink">File 3</a>

I would like to start the download automatically when the page loads (show the "save as" popup or download directly).

Is there a simple way of doing this with jQuery? I managed to come up with this code

$(document).ready(function()  {
    $( ".downloadLink" ).each(function() {
        var a_href = '';
        $( this ).on( "click", function() {
            var a_href = $(this).attr('href');
            window.location.href = a_href;
            alert(a_href);
        });
        $( this ).trigger('click');
    });
});

, but it doesn't seem to work - only the latest link shows the "save as" popup. However, ALL 3 alerts are shown. What am I doing wrong?

Thanks!

Upvotes: 0

Views: 1354

Answers (3)

Young Lee
Young Lee

Reputation: 21

simply do this:

$(document).ready(function()  {
  $('a.downloadLink').on('click', function(event){
    event.preventDefault();
    var clicked_lnk = $(this).attr('href');
    alert(clicked_lnk);
  });
});

Tanvir Ahmed's answer didn't work for me: (Notice of strikethrough line)

$(document).ready(function()  {
  $('a.downloadLink').on('click', function(event){
    event.preventDefault();
    //var clicked_lnk = $(this);</del> /* didn't work for me*/
    var clicked_lnk = $(this).attr('href'); /*change*/
    window.open(clicked_lnk.attr('href'));
    $('a.downloadLink').not(clicked_lnk).each(function(){
        window.open($(this).attr('href'));
    });
  });
});

Upvotes: 0

Tanvir Ahmed
Tanvir Ahmed

Reputation: 483

On click, you can open windows/tabs for each of the links. Since the urls are file download links, the user will be prompt to save the file. And save/cancel the new window/tab will be closed leaving the the main page only.

Please check with the following codes. Here when a link is clicked, the default behavior is prevented, and each of the download links are opened in new window. Since the urls are download links, so the user will be prompt to download the files and on save/cancel the new windows will be closed leaving the parent window as it is.

$(document).ready(function()  {
  $('a.downloadLink').on('click', function(event){
    event.preventDefault();

    var clicked_lnk = $(this);
    window.open(clicked_lnk.attr('href'));

    $('a.downloadLink').not(clicked_lnk).each(function(){
        window.open($(this).attr('href'));
    });
  });
});

The '.not(clicked_lnk)' in the code '$('a.downloadLink').not(clicked_lnk).each(function(){...}' is to prevent a recurring chained click events looping on clicking of one element.

Upvotes: 1

user1078494
user1078494

Reputation: 509

Found the solution, thanks to Tanvir.

$(document).ready(function()  {
    $( ".downloadLink" ).each(function() {
        var a_href = '';
        $( this ).on( "click", function() {
            var a_href = $(this).attr('href');
             window.open(a_href);
        });
        $( this ).trigger('click');
    });
});

So, instead of using window.location.href I'm just using window.open - it's not the most beautiful solution, but it seems to work...

Upvotes: 1

Related Questions