2013-10-21 16:51

Keywords: comment, live, preview


This plugin will enable live comments preview. To try it, just fill out the name, start typing a comment, hit Preview and continue typing.


jQuery 1.7 or newer.


Include <txp:etc_live_preview /> tag somewhere near (preferably before) <txp:comments_form /> in your comments_display form, like this:

	<txp:etc_live_preview />
	<txp:comments_form />
<txp:else />
	<p><txp:text item="comments_closed" /></p>

It will play the role of <txp:comments_preview />, wrapped in <div id="cpreview"></div>, unless you set a preview jQuery selector explicitly:

<div id="my-preview">
	<txp:etc_live_preview preview="#my-preview" />

Live preview updates will trigger start and stop jQuery events on the nodes matched by preview attribute, so you can enhance them with your own animations:

$(function () {
	$("#creview").bind("start", function() {
		$(this).stop(true).fadeTo("fast", 0.1);
	}).bind("stop", function() {
		$(this).stop(true).fadeTo("fast", 1);


<txp:etc_live_preview /> has the following attributes:

  • timeout: a timeout (in ms) of user inactivity before two live previews, default 600.
  • auto: whether the live preview should be automatically triggered after the user has filled all required fields. Default is 0 (no).
  • preview: a jQuery selector to be used instead the default #cpreview.
  • form, wraptag, class: same as <txp:comments_preview />.