I'm building a small app with a few modal dialog windows. The windows require a tiny bit of HTML. I've hard coded the window HTML in the javascript library but am not thrilled with this solution. Is there a more elegant way to do this? It seems that JavaScript doesn't have multi line strings/heredoc syntax.
var html = <div id='email_window'><h2>Email Share</h2><div>;
html = html + <form action='javascript:emailDone();' method='post'>;
html = html + <div><label for='to'>To</label><input id='to' type='text'></div>;
html = html + <div><label for='from'>From</label><input id='from' type='text' value=' + email + '></div>;
html = html + <div><label for='subject'>Subject</label><input id='subject' type='text' disabled='disabled' value=' + subject + '></div>;
html = html + <div><label for='body'>Body</label><input id='body' type='text' disabled='disabled' value=' + body + '></div>;
html = html + <div><input type='submit' value='Send'><input type='button' value='Cancel' onClick='javascript:$.fancybox.close();'></div>;
html = html + </form></div>;
$(#data).html(html);
Added to clarify the original message-
Any solution can't use Ajax/XHR to pull in the template file because the javascript library will be on a different domain that the html file it's included in
It's a little like ShareThis. The library will be included on a number of different sites and attached to the onClick event of any anchor tag inside divs with attribute sharetool=true.
For example:
http://www.bar.com - index.html
<html>
...
<script type=text/javascript src=http://www.foo.com/sharetool.js></script>
...
<body>
<div sharetool=true>
</div>
...
</html>