jQuery mailto with anchor element - javascript

I tried this with umpteen examples we see on the net. But I guess there is none that is simple and works on all browsers (IE 8 and above as well).
I am trying to simply open up Outlook window with mailto link.
Email
JQuery:
$(function () {
$('#emailLink').on('click', function (event) {
alert("Huh");
var email = 'test#theearth.com';
var subject = 'Circle Around';
var emailBody = 'Some blah';
window.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
});
});
Granted, I am a jQuery newbie. The above just doesn't work. It just flickers the browser but nothing opens. I guess this is because of window.location.
Is there a simple solution? I want this to work in IE8 & above and in all browsers.
The body is generated automatically (in JSP).

here's working solution:
Email
and the function:
$(function () {
$('#emailLink').on('click', function (event) {
event.preventDefault();
alert("Huh");
var email = 'test#theearth.com';
var subject = 'Circle Around';
var emailBody = 'Some blah';
window.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
});
});

If you do not need the address as a text anywhere on the website I would suggest this:
$('a[data-mail]').on('click', function() {
window.location = 'mailto:' + $(this).data('mail')+'#yourdomain.net' + '?subject=Spotflow';
});
The link woud look like this:
Send me a mail
No chance for bots!

$(function () {
$('[name=emailLink]').click(function () {
var email = 'test#theearth.com';
var subject = 'Circle Around';
var emailBody = 'Some blah';
$(this).attr('href', 'mailto:' + email +
'?subject=' + subject + '&body=' + emailBody);
});
});
.click can be replaced with .mousedown and so on.. or just
$(function () {
$('[name=emailLink]').each(function() {
var email = 'test#theearth.com';
var subject = 'Circle Around';
var emailBody = 'Some blah';
$(this).attr('href', 'mailto:' + email +
'?subject=' + subject + '&body=' + emailBody);
});
});

Your selector is looking for an ID
$('#emailLink')
But you have only specified the name.
Add id="emaillink" to the anchor tag.

You don't need any javascript/jQuery at all for this, just the following HTML should do:
Email

Related

Display SignalR message with embedded HTML

I've begun playing around with SignalR, of course starting with the initial chat hub that I suppose everybody does at one point or another. I want to modify it so that if the user types in HTML in their message, when it gets displayed it shows rendered HTML as oppose to just the string with HTML tags in it.
Here is my javascript:
<script type="text/javascript">
$(function () {
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
var encodedName = $('<div />').text(name).html();
var encodedMesg = $('<div />').text(message).html();
if (message === "joined session") {
$('#discussion').append('<li><strong>' + encodedName + ' ' + encodedMesg + '</strong></li>');
} else {
$('#discussion').append('<li><strong>' + encodedName + '</strong>: &nbsp' + encodedMesg + '</li>');
}
};
$('#message').focus();
$.connection.hub.start().done(function () {
chat.server.send("#FullName", "joined session");
$('#sendmessage').click(function () {
chat.server.send("#FullName", $('#message').val());
$('#message').val("").focus();
});
});
});
The encodedMesg has "this is <b>bold</b>", but instead of rendering it as HTML, it just shows it as a string. How can I allow this to render as HTML?
I've tried encoding the < as < and > as > but that didn;t work. I also tried %3C and %3E but they didn;t work either.
Calling .text changes the text of an object and intentionally prevents html or scripts from being parsed.
You can get it to parse it by changing the value with .html
var encodedMesg = $('<div />').html(message);
use this:
var encodedMsg = $('').text(message).html();

jQuery $.get() is not executed on form submission

When a form is submitted, I want to asynchronously invoke an email-sending script order.php with some $_GET parameters.
The jQuery $.get() function doesn't execute and there are no errors displayed in console.
HTML markup:
<form name="submit" id="orderconfirm" action="somefile.php">
<input type="hidden" name="orderkey" id="orderkey" value="somekey"/>
<input type="text" name="email" id="orderemail"/>
<input type="submit" value="submit"/>
</form>
jQuery script:
$(document).ready(function() {
$('#orderconfirm').submit(function() {
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
});
});
It's really strange because a similar script (also $.get() with a simple URL) works just fine. I'm also sure that the order.php script works fine and the path is correct. The problem is that somehow $.get(url) is not executed and no request is sent.
The submit handler works fine too - for example an alert worked.
Any ideas?
Prevent default browser action by using preventDefault()
$(document).ready(function() {
$('#orderconfirm').submit(function(event) {
event.preventDefault();
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
});
});
Documentation
Also you can use return false; to restrict the form submission
$(document).ready(function() {
$('#orderconfirm').submit(function(event) {
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
return false;
});
});
To submit the form after $.get try this,
$(document).ready(function() {
$('#orderconfirm').submit(function(event) {
event.preventDefault();
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url,function(){$('#orderconfirm').submit()});
});
});
Documentation
Because you don't prevent default browser behavior. Add event.preventDefault method:
$('#orderconfirm').submit(function(event) {
event.preventDefault();
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
});
try this
$('#orderconfirm').submit(function(e) {
e.preventDefault();
})
and use valid $.get
$.get( "order.php", {'key':key,'mail': email});
$(document).ready(function() {
$('#orderconfirm').submit(function(e) {
e.preventDefault();
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
});
});
the problem happens with the default behavour from browser on form submission. you need to prevent the default from being executed.
optionally you can even change the type of button from 'submit' and try.
Use return false or e.preventDefault() like,
$('#orderconfirm').submit(function(e) {
e.preventDefault();
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
});
You have two ways to fix this.
1.Use e.preventDefault(); to prevent browser's default behavior from submitting the form.
$('#orderconfirm').submit(function(e) { // 'e' here is new
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var url = 'order.php?key=' + key + '&mail=' + email;
$.get(url);
e.preventDefault(); // and this line is new
});
2. Or just change the submit type to button.
<input type="button" value="submit"/>
By the way, you can get values as parameters instead of string. jQuery.get()
$('#orderconfirm').submit(function(e) {
var key = $('#orderkey').val();
var email = $('#orderemail').val();
var page = 'order.php';
$.get(page, {mail: email, key: key}); // this line
e.preventDefault();
});
Try this
$.get( "order.php", { key: key , mail: email } );

Tab ( \t ) is not working correctly in Javascript Function

There is a function which send an email via default email client. In body of email message, there are few tabs between words. But, when I send this message to default email client, these tabs are not present.
JavaScript Code:
function SendMail() {
try {
var mailAddress = 'test#gmail.com';
var mailSubject = 'Mail Subject';
var mailBody = 'Text goes here';
location.href = 'mailto:' + encodeURIComponent(mailAddress) +
'?subject=' + encodeURIComponent(mailSubject) +
'&body=' + encodeURIComponent(mailBody);
}
catch (err) { alert(err);}
}
Test Output: Text goes here
But, there should be tab instead of space between words.
Anybody, help me what's wrong with this ?
As you can see here: http://jsfiddle.net/VXL83/ the tabs are in the url, but with my setttings (Thunderbird, HTML email) they are eliminated from the body text by thunderbird.
function SendMail() {
try {
var mailAddress = 'test#gmail.com';
var mailSubject = 'Mail Subject';
var mailBody = 'Text\tgoes\there';
var url = 'mailto:' + encodeURIComponent(mailAddress) +
'?subject=' + encodeURIComponent(mailSubject) +
'&body=' + encodeURIComponent(mailBody);
alert(url);
location.href = url;
}
catch (err) { alert(err);}
}
SendMail();

URL being encoded wrong

I'm getting confused passing the http:// in a string to the url as it is being stripped to
http%3A%2F%2F
I tried.. using the encodeURIComponent(http://)
but that didn't work either..
I'm trying to pass the url into here:
https://www.facebook.com/sharer/sharer.php?url=
Here is my code that isn't working:
$(document).on('click', '.fb', function(e) {
var findfb = $('.fb').parent().parent().parent().find(".zoomy").attr("src");
var facebook_url = 'http://www.facebook.com/sharer.php?url=http://www.site.com/folder1/'+encodeURIComponent(findfb)+
'&title='+encodeURIComponent('title of page');
window.open(facebook_url);
});
Just do it as simple as:
var facebook_url = 'http://www.facebook.com/sharer.php?url=' + encodeURIComponent('http://www.site.com/folder1/' + findfb +'&title=' + 'title of page');
var facebook_url = 'http://www.facebook.com/sharer.php?url=' + encodeURIComponent('http://www.site.com/folder1/' + findfb) + '&title=' + encodeURIComponent('title of page');

Send media by mail javascript

I'm trying to send a recorded message by mail, but no mail client or message is opening when send button is clicked even if the function is running,
function sendMail(media) {
$('#send').click(function() {
var link = "mailto:me#example.com"
+ "?cc=myCCaddress#example.com"
+ "&subject=" + escape("This is my subject")
+ "&body=" + media
;
window.location.href = link;
});
}
whats the problem in my script?
In your sendMail function you create a handler for your button. So you need to call sendMail(); once after declaration to create a handler. I think there is no point in creating separate function if you're going to use it just once. You should do this:
$(function() {
$('#send').click(function() {
var link = "mailto:me#example.com"
+ "?cc=myCCaddress#example.com"
+ "&subject=" + escape("This is my subject")
+ "&body=" + media;
window.location.href = link;
});
});

Categories

Resources