Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
124
rated 0 times [  130] [ 6]  / answers: 1 / hits: 41188  / 13 Years ago, tue, may 31, 2011, 12:00:00

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>

More From » jquery

 Answers
104

Templates. Pick your poison





Either inline them as script blocks or load them using ajax as external resources.



I personally use EJS as external template files and just get EJS to load them and inject them into a container with json data bound to the template.



new EJS({ 
url: url/to/view
}).update('html_container_name', {
foobar: Suprise
});


And then view files use generic view logic.



// url/to/view
<p> <%=foobar %></p>

[#91948] Monday, May 30, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
juancarlos

Total Points: 580
Total Questions: 105
Total Answers: 103

Location: Grenada
Member since Sun, Dec 20, 2020
3 Years ago
;