Wordpress JQuery sending content of variable to email body as clickable link

Question

I don't really like to use Jquery in a wordpress situation, but alas...

I have this script:

$('.woocommerce ul li').each(function(i)
  {
     var lenke = $(this).find("a").attr('href');
     $(this).append('&nbsp;&nbsp;<input type="button" class="sendTo" data-id="'+lenke+'" value="E-MAIL">');
});

$('.sendTo').on('click', function(e) {
  var url = $(this).attr("data-id");
  console.log(url);
   var email = '';
   var subject = 'MAIL from ME';
   var emailBody = 'Click to Download ' + url +'.';
      document.location = "mailto:"+email+"?subject="+subject+"&body="+emailBody;

})

The first code adds an EMAIL-button to each A HREF tag inside (ul)(li) inside a (div). As well as copy the HREF from the existing A HREF tag and apply that to the button data-id.

The second code opens a standard email client window and add the data-id as a clickable url in the email body.

Running this script under a normal HTML page (and in FIDDLE) everything works like a charm. Problem is, running it inside my wordpress page... the URL (variable) does not appear in the email body.

so the normal output in FIDDLE is like this:

 CLICK TO OPEN: https://sitename.com/document/doc.pdf

the Wordpress output looks like this:

 CLICK TO OPEN:

Did I mention working with jQuery in Wordpress is something I don't like ?

The question remains, how to I encode the variable (url) into something that wordpress Jquery will send as text, and yet converts it into a clickable link in the email body ?

All and any ideas will be gratefully received.

Answer 1

I did a test where I removed the text from the variabel sent to the email body. I sent the URL only and it worked. So I made sure that the body-variabel didn't contain any code or hidden characters. This time it worked like a charm.

SO in the end I don't know what made it work, but this little edit did the trick.

  var emailBody = 'Click to Download ' + url