Triggering multiple mailto links with jquery

Question

I'm starting to think that this may not even be possible, but I'm trying to automate a backend management task for myself here by allowing multiple emails to be initiated at once.

I have a table with users. The last column of the table has a drop-down button with mailto links that initiate various emails to the user for that row. The column also has a checkbox next to the button. Here's a simplified snippet:

  <table>
    <tr>
      <td>
        User
      </td>
      <td>
        <div class="btn-group individual-btn">
          <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
            Email User
          <ul class="dropdown-menu">
            <li>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you open?
              </a>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you click?
              </a>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you pay?
              </a>
          </ul>
        </div>
        <input type="checkbox" class="selected-row">
      </td>
    </tr>
    <tr>
      rinse and repeat...

At the end of the table I have a button with the same set of actions but the idea for this button is that clicking it will open an email for every selected user (as indicated by the checkbox).

    <div class="btn-group master-btn">
      <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
        Email All Checked Users
      <ul class="dropdown-menu">
        <li class="email-items">
          <a class="no-open" href="#">
            Why didn't you open?
          </a>
          <a class="no-open" href="#">
            Why didn't you click?
          </a>
          <a class="no-open" href="#">
            Why didn't you pay?
          </a>
      </ul>
    </div>

I thought the js might be this easy:

    $(".master-btn .email-items a").click(function(e){
      linkClass = "a." + $(this).attr("class").trim()
      $(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
      e.preventDefault();
    });

But that only opened an email for the first selected row. So, I thought, well maybe the dom needs space between these clicks, so I'll iterate over each and put a delay in to simulate clicks; but same result: only the first selected row is emailed:

    $(".master-btn .email-items a").click(function(e){
      linkClass = "a." + $(this).attr("class").trim()
      $(".selected-row:checked").each(function(i){
        var self = this
        setTimeout(function(){
          $(self).prev(".individual-btn").find(linkClass)[0].click();
        }, 2000*i);
      });
      e.preventDefault();
    });

Any thoughts? Will the browser even allow this?

Answer 1

I think this is the fix:

$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
    $(this)[0].click();
});

When you use [0] on a jQuery object, it only returns the first DOM element in the collection, equivalent to .get(0) . If you want an array of all DOM elements, you would have to use .get() (with no arguments it returns all the elements).

Answer 2

Working example: https://jsfiddle.net/gaboom/h81qov5g/

 $("#send").on("click", function(event) { event.preventDefault(); $("#iframes").empty(); $("#links a").each(function() { setTimeout($.proxy(function() { var popup = window.open($(this).attr("href")) setTimeout($.proxy(function() { this.close(); }, popup), 100); }, this), 100) }) }) 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="send" href="#">CLICK TO SEND</a> <div id="links" class="hidden"> <a href="mailto:john@example.com">John</a> <a href="mailto:sarah@example.com">Sarah</a> <a href="mailto:john@example.com">John</a> <a href="mailto:sarah@example.com">Sarah</a> <a href="mailto:john@example.com">John</a> <a href="mailto:sarah@example.com">Sarah</a> </div>