{"id":1471,"date":"2003-07-20T16:22:21","date_gmt":"2003-07-21T06:22:21","guid":{"rendered":"http:\/\/michaelhans.com\/eclecticism\/2003\/07\/20\/live-comment-previews\/"},"modified":"2019-12-05T11:37:07","modified_gmt":"2019-12-05T19:37:07","slug":"live-comment-previews","status":"publish","type":"post","link":"https:\/\/michaelhans.com\/eclecticism\/2003\/07\/20\/live-comment-previews\/","title":{"rendered":"Live Comment Previews"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:13240,&quot;href&quot;:&quot;http:\\\/\\\/www.djwudi.com\\\/longletter&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20050403220727\\\/http:\\\/\\\/www.djwudi.com:80\\\/longletter\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-12 08:30:12&quot;,&quot;http_code&quot;:500},{&quot;date&quot;:&quot;2026-03-18 19:59:18&quot;,&quot;http_code&quot;:500},{&quot;date&quot;:&quot;2026-03-27 06:16:41&quot;,&quot;http_code&quot;:500},{&quot;date&quot;:&quot;2026-04-05 13:48:12&quot;,&quot;http_code&quot;:500},{&quot;date&quot;:&quot;2026-04-08 17:26:12&quot;,&quot;http_code&quot;:500},{&quot;date&quot;:&quot;2026-04-15 19:40:34&quot;,&quot;http_code&quot;:500}],&quot;broken&quot;:true,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-15 19:40:34&quot;,&quot;http_code&quot;:500},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:14100,&quot;href&quot;:&quot;http:\\\/\\\/www.scriptygoddess.com\\\/archives\\\/001253.php&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20130308171732\\\/http:\\\/\\\/www.scriptygoddess.com:80\\\/archives\\\/001253.php&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-12 17:18:12&quot;,&quot;http_code&quot;:409},{&quot;date&quot;:&quot;2026-04-07 22:58:39&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-04-18 04:01:42&quot;,&quot;http_code&quot;:409}],&quot;broken&quot;:true,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-18 04:01:42&quot;,&quot;http_code&quot;:409},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:14101,&quot;href&quot;:&quot;http:\\\/\\\/pms.colonpee.com\\\/cgi\\\/comments.cgi?article=a200301090951&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20031118165138\\\/http:\\\/\\\/pms.colonpee.com:80\\\/cgi\\\/comments.cgi?article=a200301090951&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-12 17:18:14&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-03-27 06:09:25&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-27 06:09:25&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>The &#8216;Live Comment Preview&#8217; hack that I use on <a href=\"http:\/\/www.djwudi.com\/longletter\/\" title=\"The Long Letter\">The Long Letter<\/a> has now been implemented here on Eclecticism. If you know what I&#8217;m talking about, then we&#8217;re good to go. If you <em>don&#8217;t<\/em> know what I&#8217;m talking about, then click on the &#8220;Comments&#8221; link to any post, type something in the comment box, and look just below the comment box. It&#8217;s a nifty trick. ;)<\/p>\n<p>I originally picked this up from <a href=\"http:\/\/www.scriptygoddess.com\/archives\/001253.php\" title=\"Preview Comments Live\">ScriptyGoddess<\/a>, with help from <a href=\"http:\/\/pms.colonpee.com\/cgi\/comments.cgi?article=a200301090951\" title=\"phillip's weblog of infotainment!\">Phillip<\/a>. Geeky tech details on my implementation here follow.<\/p>\n<p>All this is is a nice little JavaScript addition to the page. I don&#8217;t <em>believe<\/em> that this will constitute a security risk, but I&#8217;m no expert, so use at your own risk. ;) Obviously, if you do want to use this on your site, you&#8217;ll need to have access to your templates.<\/p>\n<p>In the header of the individual entry template, just after the already included JavaScript bits, I added the following code:<\/p>\n<pre><code>&lt;script type=\"text\/javascript\"&gt;\n var newline = \/n\/g;\n function ReloadTextDiv() {\n  var NewText = document.getElementById(\"text\").value;\n  NewText = NewText.replace(newline, \"&lt;br \/&gt;\");\n  var DivElement = document.getElementById(\"TextDisplay\");\n  DivElement.innerHTML = NewText;\n  }\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>Then, in the body of the template, just after the closing <code>&lt;\/div&gt;<\/code> tag following the preview and submit buttons, but <em>before<\/em> the <code>&lt;\/form&gt;<\/code> tag, I added the following:<\/p>\n<pre><code>&lt;br \/&gt;\n&lt;h2&gt;Live Comment Preview:&lt;\/h2&gt;\n&lt;span id=\"TextDisplay\"&gt;Note: if you're comfortable with HTML, feel free to use it in your comments. If not, just type away. Single returns will be automatically converted into linebreaks (&amp;lt;br \/&amp;gt;), double returns will be converted into paragraph breaks (&amp;lt;p&amp;gt;). This text will disappear as soon as you start typing.&lt;\/span&gt;\n<\/code><\/pre>\n<p>Lastly, in the <code>textarea<\/code> tag that defines where the comment text is entered in by a visitor, I added a <code>onkeyup=\"ReloadTextDiv();\"<\/code> declaration. The full <code>textarea<\/code> tag should look as follows:<\/p>\n<pre><code>&lt;textarea tabindex=\"4\" id=\"text\" name=\"text\" rows=\"10\" style=\"width: 80%;\" onkeyup=\"ReloadTextDiv();\"&gt;\n<\/code><\/pre>\n<p>What all this does is actually simple enough. As a visitor enters their comment into the comment box, each time they release a key the <code>onkeyup<\/code> function calls the <code>ReloadTextDiv<\/code> JavaScript snippet that I added. This function loads any text inside the comment box (identified by its ID of <code>\"text\"<\/code>), replaces any carriage returns with <code>&lt;br \/&gt;<\/code> tags so that line breaks appear correctly, then writes the output into the element identified as <code>\"TextDisplay\"<\/code> &#8212; in this case, between the <code>span<\/code> tags I added after the submit and preview buttons.<\/p>\n<p>If you find this useful, feel free to use it in your own pages. While I wouldn&#8217;t refuse credit, it really does belong to <a href=\"http:\/\/www.scriptygoddess.com\/archives\/001253.php\" title=\"Preview Comments Live\">ScriptyGoddess<\/a> and <a href=\"http:\/\/pms.colonpee.com\/cgi\/comments.cgi?article=a200301090951\" title=\"phillip's weblog of infotainment!\">Phillip<\/a>. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The &#8216;Live Comment Preview&#8217; hack that I use on The Long Letter has now been implemented here on Eclecticism.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2040],"tags":[812,921,25],"class_list":["post-1471","post","type-post","status-publish","format-standard","hentry","category-blog","tag-movabletype","tag-typepad","tag-website"],"_links":{"self":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/1471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/comments?post=1471"}],"version-history":[{"count":0,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/1471\/revisions"}],"wp:attachment":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/media?parent=1471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/categories?post=1471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/tags?post=1471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}