Home/ Questions/Q 5975323
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:04:07+00:00

I’m building a small app with a few modal dialog windows. The windows require

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0