Menu
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> 
321
The process is as simple as defining a JavaScript file then calling it within the HTML through a script tag. Write the HTML you want to be repeated in the form of a JavaScript file. For a simple copyright insertion, create a file with a single line of JS, for example: document.
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML.
Embedding an HTML file is simple. All we need to do is use the common „<link>“ element. Then we add the value „import“ to the „rel“ attribute. Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts.
You can include the HTML as regular markup at the end of the page, inside an invisible div. Then you're able to reference it with jQuery.
You then need to programmatically set your variable fields (email, subject, body)
<div id='container' style='display: none;'> <div id='your-dialog-box-contents'> ... ... </div> </div> <script type='text/javascript'> $("#from").val(from); $("#subject").val(subject); $("#body").val(body); $("#data").html($("#your-dialog-box-contents")); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
