jquery automatically click on multiple links

Question

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!

You can't start multiple downloads at the same time. This is both impractical to implement and a bad UX. Either add an option to download all into a .zip file or let them click to download one by one. — Slava Knyazev
– Slava Knyazev, Commented Aug 4, 2018 at 19:25
@SlavaKnyazev says who? You can have multiple concurrent streams and it may not be bad UX if that's what the users expect. — vol7ron
– vol7ron, Commented Aug 4, 2018 at 19:36
@SlavaKnyazev I know it's impractical, but it should be possible - you CAN manually click each link and have 5 different "save as" popups at the same time. so, why can't I trigger the same functionality with jQuery? Downloading all into one zip file is not an option because of the download redirects. — user1078494
– user1078494, Commented Aug 4, 2018 at 19:36
@user1078494 you are changing window.location.href, which changes the address of the browser. There is only one href of the window. To have multiple streams, you'd have to perform via another way, like with AJAX — vol7ron
– vol7ron, Commented Aug 4, 2018 at 19:38

user1078494 · Accepted Answer · 2018-08-04 21:54:46Z

1

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...

answered Aug 4, 2018 at 21:54

user1078494

5091 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tanvir Ahmed · Accepted Answer · 2018-08-05 08:40:58Z

1

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.

edited Aug 5, 2018 at 8:40

answered Aug 4, 2018 at 20:06

Tanvir Ahmed

4633 silver badges10 bronze badges

1 Comment

user1078494 Over a year ago

thank you very much - you came close to what I wanted, but this didn't run automatically on page load. And if I used trigger, it would open a total of 9 prompts, instead of just 3. But thank you so much, you actually lead me to the solution!

Young Lee · Accepted Answer · 2022-04-02 16:33:51Z

0

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'));
    });
  });
});

answered Apr 2, 2022 at 16:33

Young Lee

791 silver badge5 bronze badges

Collectives™ on Stack Overflow

jquery automatically click on multiple links

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related