Develop Reference

How to create an HTML Email using JavaScript [duplicate]

This question already has answers here:
mailto link with HTML body
(10 answers)
Closed 1 year ago.
I would like to create an HTML email using JavaScript so that the draft is ready, and the user can send the email.
Here is what I have tried so far:
location.href = "mailto:"+"isflibrary.net.com.de.xxx"+'?cc='+"emailCC"+'&subject='+("Stuff bought by: ", email)+'&body='+"Visit mywebsite.com!";
Wrong output:
Output that I want:

Is this what you were trying to do?
$(document).ready(function() {
$('#btn').click(function() {
mailto = 'isflibrary.net.com.de.xxx';
emailCC = 'test#emailCC.com';
subject = 'Stuff bought by: ' + mailto;
htmlBody = 'Visit mywebsite.com!';
location.href = "mailto:" + mailto + "?cc=" + emailCC + "&subject=" + subject + "&body=" + htmlBody;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id=btn>e-mail</button>

Embed image in mail Body using mailto function [duplicate]

This question already has answers here:
mailto link with HTML body
(10 answers)
Closed 6 years ago.
I am using mailto function my requirement is like to embed image inside mail body
$scope.generateMail = function () {
var graph = document.getElementById('thumb_graphs_grp');
html2canvas(graph).then(function(canvas) {
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
var imageHTML = "<img " + "src='" + image.src + "' img/>";
var link = "mailto:mail#example.org?subject=Mail request&body="+ imageHTML;
window.location.href = link;
});

As stated in the RFC2368, it's not possible to include HTML with mailto:
The special hname "body" indicates that the associated hvalue is the
body of the message. The "body" hname should contain the content for
the first text/plain body part of the message. The mailto URL is
primarily intended for generation of short text messages that are
actually the content of automatic processing (such as "subscribe"
messages for mailing lists), not general MIME bodies.

HTML content is not rendered in an Email [duplicate]

This question already has answers here:
mailto link with HTML body
(10 answers)
Closed 7 years ago.
I want to open (not send) an email with a content in HTML format.
I'm using mailto of javascript, and I have created a string that contains the html in c#.net, but the mail shows the tags instead of rendering HTML. I guess I am missing a content-type: text/html but how do I put it? or is there a more correct way to do open email with content ?
Here's the c#.net code that gets the html page
[HttpPost]
public ActionResult SetMailContent(int entreatyID)
{
Entreaties entreaty = db.Entreaties.Where(e => e.ID == entreatyID).FirstOrDefault();
if (entreaty == null)
{
return new HttpStatusCodeResult(HttpStatusCode.NotFound, "File Not Found");
}
StringWriter stringWriter = new StringWriter();
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
writer.RenderBeginTag(HtmlTextWriterTag.H1);
writer.Write(entreaty.OpenDate.ToString("dd/MM/yyyy"));
writer.RenderEndTag();
}
string msg = stringWriter.ToString();
return Json(new { message = msg});
}
and javascript code:
window.location = "mailto:mail#gmail.com?body=" + SetMailContent(EntreatyID) + "&subject= " + EntreatyID;
Thank you for your help.

You need to add the HTML content to the DOM, not just display it as a string. You can do this via jQuery for example:
$("#containerId").append($("your mail content"));

twitter sharing button bit.ly integration on a static website

I am trying to integrate bit.ly on my website in JS to short my url. All my url are too long, what will be the most straight foward way to use the bit.ly restful api for sharing button on a static website in HTML/javascript.
The result I want to get is when my user click share on my website the url is automatically shortened by bit.ly
here is the code I am currently using to share my pages dynamically on twitter:
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=LOGINID&apiKey=APIKEY"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
function tweetCurrentPage()
{ window.open("https://twitter.com/share?url=" + escape(window.location.href) + "&text=" + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false; }
var TweetThisLink = {
shorten : function(e) {
e.preventDefault();
var url = this.href.substr(this.href.indexOf('http:',5))
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response : function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "I am reading documentation of"
document.location = "http://twitter.com/share?url=" + encodeURIComponent(tweet_text + ' ' + bitly_link);
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
tweet this link

Not sure if this is on purposefully obfuscated for the sake of the question, but
In your script tag the src is:
"http://bit.ly/javascript-api.js?version=latest&login=LOGINID&apiKey=APIKEY".
LOGINID & apiKey are placeholders are in-place. You need to replace them with the appropriate keys you should receive from bitly.
if this is on purpose for the sake of the question please ignore this answer.

don't know why but my function "tweetCurrentPage()" for dynamic url won't work it's giving me a respond INVALID_URI from bit.ly, but if I hard code the href value like this twitter.com/share?url=+exemple.com"; it's working...

Call MVC action method by javascript but not using AJAX

I have a MVC3 action method with 3 parameters like this:
var url = "/Question/Insert?" + "_strTitle='" + title + "'&_strContent='" + content + "'&_listTags='" + listTags.toString() + "'";
and I want to call this by normal javascript function not AJAX (because it's not necessary to use AJAX function)
I tried to use this function but it didn't work:
window.location.assign(url);
It didn't jump to Insert action of QuestionController.
Is there someone would like to help me? Thanks a lot
This is more detail
I want to insert new Question to database, but I must get data from CKeditor, so I have to use this function below to get and validate data
// insert new question
$("#btnDangCauHoi").click(function () {
//validate input data
//chủ đề câu hỏi
var title = $("#txtTitle").val();
if (title == "") {
alert("bạn chưa nhập chủ đề câu hỏi");
return;
}
//nội dung câu hỏi
var content = GetContents();
content = "xyz";
if (content == "") {
alert("bạn chưa nhập nội dung câu hỏi");
return;
}
//danh sách Tag
var listTags = new Array();
var Tags = $("#list_tag").children();
if (Tags.length == 0) {
alert("bạn chưa chọn tag cho câu hỏi");
return;
}
for (var i = 0; i < Tags.length; i++) {
var id = Tags[i].id;
listTags[i] = id;
//var e = listTags[i];
}
var data = {
"_strTitle": title,
"_strContent": content,
"_listTags": listTags.toString()
};
// $.post(url, data, function (result) {
// alert(result);
// });
var url = "/Question/Insert?" + "_strTitle='" + title + "'&_strContent='" + content + "'&_listTags='" + listTags.toString() + "'";
window.location.assign(url); // I try to use this, and window.location also but they're not working
});
This URL call MVC action "Insert" below by POST method
[HttpPost]
[ValidateInput(false)]
public ActionResult Insert(string _strTitle, string _strContent, string _listTags)
{
try
{
//some code here
}
catch(Exception ex)
{
//if some error come up
ViewBag.Message = ex.Message;
return View("Error");
}
// if insert new question success
return RedirectToAction("Index","Question");
}
If insert action success, it will redirect to index page where listing all question include new question is already inserted. If not, it will show error page. So, that's reason I don't use AJAX
Is there some one help me? Thanks :)

Try:
window.location = yourUrl;
Also, try and use Fiddler or some other similar tool to see whether the redirection takes place.
EDIT:
You action is expecting an HTTP POST method, but using window.location will cause GET method. That is the reason why your action is never called.
[HttpPost]
[ValidateInput(false)]
public ActionResult Insert(string _strTitle, string _strContent, string _listTags)
{
// Your code
}
Either change to HttpGet (which you should not) or use jQuery or other library that support Ajax in order to perform POST. You should not use GET method to update data. It will cause so many security problems for your that you would not know where to start with when tackling the problem.
Considering that you are already using jQuery, you might as well go all the way and use Ajax. Use $.post() method to perform HTTP POST operation.
Inside a callback function of the $.post() you can return false at the end in order to prevent redirection to Error or Index views.
$.post("your_url", function() {
// Do something
return false; // prevents redirection
});
That's about it.

You could try changing
var url = "/Question/Insert?" + "_strTitle='" + title + "'&_strContent='" + content + "'&_listTags='" + listTags.toString() + "'";
to
var url = "/Question/Insert?_strTitle=" + title + "&_strContent=" + content + "&_listTags=" + listTags.toString();
I've removed the single quotes as they're not required.
Without seeing your php code though it's not easy to work out where the problem is.
When you say "It didn't jump to Insert action of QuestionController." do you mean that the browser didn't load that page or that when the url was loaded it didn't route to the expected controller/action?

You could use an iframe if you want to avoid using AJAX, but I would recommend using AJAX
<iframe src="" id="loader"></iframe>
<script>
document.getElementById("loader").src = url;
</script>