dynamic content from a div added to a mailto

[basamdamdu]

Hi all,

I am a newbie when it comes to js/jquery.

I am trying to have the content of a div (let's call it "quote") added to the body of a mailto.

the content of the div "quote" is randomly generated (stored in .js file) by pressing a "next" button.

this is for a web app (targeting essentially iphone/ipod users- i know contrary to the point of a web app, but that's just how it is).

so basically,

-user is on the web app
-click next to find something he fancies
-sees something he likes
-click on a share button that opens his email (on iphone/touch)
-what he sees on the page is pre entered in the email body

and what is pre entered varied from page to page. it is never set, otherwise i'd know how to do it-well, i think :(

I hope i am kinda clear.

I have posted a similar question on forrst but the answer was not detailed enough for me to, even after researching online, be able to come up with a working solution.

i know enough js to modify things but i am not skilled enough to devise my own solution.

thank you for your help,
BD

[Airshow]

MailTo urls are quite simple to compose. It's just a question of composing a string of the right format, including subject, cc, bcc and body components as required. This should give you an idea.

Here's a javascript constructor to make things easy:

function Mailto_url(){
	var encode_mailto_component = function(str){
		try{ return encodeURIComponent(str); }
		catch(e){ return escape(str); }
	}
	var AddressList = function(){
		var list = [];
		this.length = 0;
		this.add = function(address){
			if(address) {
				list.push(address);
				this.length = list.length;
			}
		};
		this.get = function(){
			return list.join(';');
		};
	};
	var subject = '',
		body = '',
		mainList = new AddressList(),
		ccList = new AddressList(),
		bccList = new AddressList();
	this.setSubject = function(str){ subject = encode_mailto_component(str); }
	this.setBody = function(str){ body = encode_mailto_component(str); }
	this.addMain = function(x) { mainList.add(x); }
	this.addCC = function(x) { ccList.add(x); }
	this.addBCC = function(x) { bccList.add(x); }
	this.getURL = function(allow_empty_mainList){
		var out = ['mailto:'];
		var extras = [];
		if(mainList.length === 0 && !allow_empty_mainList){
			throw('Mailto_url: no main addressees');
		}
		else{
			out.push(mainList.get());
		}
		if(subject) { extras.push('subject=' + subject); }
		if(ccList.length) { extras.push('cc=' + ccList.get()); }
		if(bccList.length) { extras.push('bcc=' + bccList.get()); }
		if(body) { extras.push('body=' + body); }
		if(extras.length) { out.push('?' + extras.join('&')); }
		return out.join('');
	}
}

I have no specific knowledge of iPhone/touch so have incuded some safety, in case the javascript engine supports only old fashioned escape() and not encodeURIComponent() . I expect it supports the latter but it's best to avoid an uncaught error if possible. For most characters, the result is identical.

And here's how to use it:

var mailTo = new Mailto_url();
mailTo.addMain('[e-mail]');
mailTo.addMain('[e-mail]');
mailTo.addCC('[e-mail]');
mailTo.addCC('[e-mail]');
mailTo.addBCC('[e-mail]');
mailTo.addBCC('[e-mail]');
mailTo.setSubject('About the party');
mailTo.setBody('Could you remind me of the date please.');
alert(mailTo.getURL());

I just alert the composed mailTo url here but you will use it as a hyperlink's HREF, eg.:

myLink.href = mailTo.getURL();

There's no validation, so be sure only to feed it only with valid email addresses.

To build mailTo urls server-side, then implement something similar in PHP, JSP, ASP etc.

Airshow

[basamdamdu]

Hi there,
Thanks for your answer.

I am a bit stuck. I am really new to js.

Here is my code as I think the description of my problem may not have been clear :)

the javascript: ( i have tried document.body.innerHTML and document.getElementById)
<!-- send content in email -->   
<script type="text/javascript">      
            function getContent() { 
                document.getElementById('quote').innerHTML = ''; 
            } 
        </script>

part of the html:

<div id="wrapper">
    <h1><blockquote id="quote" value="">CONTENT TO BE SENT IN THE EMAIL'S BODY</blockquote></h1>
    <center><p><a href="#" onclick="randomQuote(); return false;">
    <img src="img/button-next.png" /></a></p></center>

<nav>
        <ul>
                <li><a class="home" href="#"></a></li>
                <li><a id="share" class="share" href="mailto:&body="" onclick="getContent()"></a></li>      
                <li><a class="info" href="#"></a></li>
        </ul>
</nav>

As I said, I'm not really knowlegeable in js. this is just for a prototype, so no production code quality required (so it's ok to have the mailto etc).

I don't know how to construct the function.
Still looking though...

Thanks for your help
BD

[Airshow]

Basamdamdu,

OK, first install my Mailto_url() constructor. Copy from my post above and paste between <script>...</script> tags in your page's <head>.

Then replace getContent() with this version:

function getContent(link) {
	var quote = document.getElementById('quote');
	if(quote && quote.innerHTML){
		var mailTo = new Mailto_url();
		mailTo.setSubject("Here's a great quote I just saw");
		mailTo.setBody(quote.innerHTML);
		link.href = mailTo.getURL(true);
		return true;
	}
	return false;
}

Then adjust the HTML as follows:

<li><a id="share" class="share" href="#" onclick="return getContent(this)">Share Quote</a></li>

Tested in Opera 11.61, with Windows Live mail client.

Airshow

[basamdamdu]

Airshow,

Thanks a million!!! This is exactly what I needed and it works like a charm!!!

Ok, so I was wayyyyyyy far from a solution on my own :(

One last question: how would you rate the difficulty of what you just did - beginner, intermediate or advanced?

Again, thanks a lot for your precious help. I am in UX so if you need anything in that field, hit me up!

Thank you.
BD

ps: i am not super familiar with forum etiquette so if there is a way to add points/reputation etc to your profile, let me know and i will.

[Airshow]

Basamdamdu,

Pleased to be of help. At the risk of upsetting you, that's probably no more than Beginner+ level.

If you want to get a better feel for the language, then you could do worse than go here and scroll down to the "videos" section. Douglas Crockford is extremely knowledgeable and although you may not understand everything he says, you will find his enthusiasm is infectious.

Reputation (rep) on Daniweb is given against posts and accrues to the poster. Typically, you go to a post that provided you with an answer or was otherwise useful or stimulating and up-vote it (up arrow in top-right corner) - you will be invited to enter a comment. Down-voting is also possible. The amount of rep points given is determined automatically by one's own rep level - see your profile.

Thanks in advance
Airshow

[basamdamdu]

Hi Airshow,

Have added the reputation points (only have 1 available) to both your answers.

Not upset, just sad it's only beginner's stuff :(

I'll head over that link and try to get those JS skills to some decent levels.

Thanks again for your help!
BD