Add comments without reloading?

etc · 2013-10-17 16:37:58

jstubbs wrote:

Yes please! Been a bit quiet over there recently as I’m struggling with time and the day job.

It basically works now, but we probably could integrate comments list refreshing and an optional preview bypass, as suggested by Jukka. But would it be as spam-proof as the current method?

@Jukka: thank you for the code, but I’d like to know if there exists a pure onsubmit way: just what POST data gets submitted?

Gocom · 2013-10-17 17:53:21

etc wrote:

I’d like to know if there exists a pure onsubmit way: just what POST data gets submitted?

The event has no relation to the sent data; it’s just an event. There also is no indication what invoked the submit event, since the leading event, such as a button click, is a separate event¹. The submit event will always target a formElement.

¹ Firefox extends event object with non-standard explicitOriginalTarget property that points to the chain originator.

Last edited by Gocom (2013-10-17 18:02:09)

etc · 2013-10-17 19:52:57

Gocom wrote:

The event has no relation to the sent data; it’s just an event. There also is no indication what invoked the submit event, since the leading event, such as a button click, is a separate event. The submit event will always target a formElement.

We are not really interested in explicitOriginalTarget or such here, formElement would be ok, but its pity that it does not contain some kind of sentElements list.

Freeant · 2013-10-18 07:46:26

That’s interesting.
After saving a comment, the page is reloaded and a new comment is not in focus, it is necessary to scroll the page.
How to do that after saves, did not have to scroll through the article and search for a comment.

etc · 2013-10-19 16:08:50

I have updated the script to enable live comment preview after the initial “Preview” click:

<script type="text/javascript">
var liveComments = {
liveTimeout: null,
inputElement: null,

liveStart: function(event, timeout) {
	this.inputElement = event.target;
	if(this.liveTimeout) window.clearTimeout(this.liveTimeout);
	if(!timeout) liveComments.livePreview(event);
	else this.liveTimeout = window.setTimeout("liveComments.livePreview(null)", timeout);
},

livePreview: function (event) {
	var form = $("#txpCommentInputForm");
	var valid = true;
	$("*[required]", form).each(function() {
		if(!$(this).val()) valid = false;
	});
	if(!valid) return;

	if(event) event.preventDefault();
	var live = this.inputElement.type != "submit";
	var post = live ? [{name : "preview", value : "Preview"}] : [{name : this.inputElement.name, value : this.inputElement.value}]; 
	post = $.merge(post, form.serializeArray());
	if(!live && $("#txpCommentSubmit").is(":disabled") || this.inputElement.name == "submit")
		$("#cwrapper").load(form.attr("action")+" #cwrapper>*", post);
	else $("#cpreview").load(form.attr("action")+" #cpreview>*", post);
}
};

$(function () {

$("#cwrapper").on("click", "input[type='submit']", function(event) {
	liveComments.liveStart(event, 0);
})
.on("change keypress", "#name, #email, #web, #message", function(event) {
	if(event.type != "keypress" || event.which) liveComments.liveStart(event, 600);
});

});
</script>

Edit: better modern browser version: replace $(function () { ... }); part with


$(function () {

document.getElementById("cwrapper").addEventListener("input", function(event) {
	liveComments.liveStart(event, 600);
});

$("#cwrapper").on("click", "input[type='submit']", function(event) {
	liveComments.liveStart(event, 0);
});

});

Last edited by etc (2013-10-19 18:56:06)

Freeant · 2013-10-20 09:35:56

I can’t save form comments_display

<h2 id="<txp:text item="comment" />"><txp:comments_invite textonly="1" showalways="1" showcount="0" /></h2>
<txp:comments />
<div id="cwrapper">
<txp:if_comments_allowed>
	<txp:if_comments_preview>
		<div id="cpreview"><txp:comments_preview /></div>
	</txp:if_comments_preview>
	<txp:comments_form isize="25" msgcols="45" msgrows="15" />
<txp:else />
	<p><txp:text item="comments_closed" /></p>
</txp:if_comments_allowed>
</div>
<script type="text/javascript">
var liveComments = {
liveTimeout: null,
inputElement: null,
liveStart: function(event, timeout) {
	this.inputElement = event.target;
	if(this.liveTimeout) window.clearTimeout(this.liveTimeout);
	if(!timeout) liveComments.livePreview(event);
	else this.liveTimeout = window.setTimeout("liveComments.livePreview(null)", timeout);
},
livePreview: function (event) {
	var form = $("#txpCommentInputForm");
	var valid = true;
	$("*[required]", form).each(function() {
		if(!$(this).val()) valid = false;
	});
	if(!valid) return;
	if(event) event.preventDefault();
	var live = this.inputElement.type != "submit";
	var post = live ? [{name : "preview", value : "Preview"}] : [{name : this.inputElement.name, value : this.inputElement.value}]; 
	post = $.merge(post, form.serializeArray());
	if(!live && $("#txpCommentSubmit").is(":disabled") || this.inputElement.name == "submit")
		$("#cwrapper").load(form.attr("action")+" #cwrapper>*", post);
	else $("#cpreview").load(form.attr("action")+" #cpreview>*", post);
}
};
$(function () {
$("#cwrapper").on("click", "input[type='submit']", function(event) {
	liveComments.liveStart(event, 0);
})
.on("change keypress", "#name, #email, #web, #message", function(event) {
	if(event.type != "keypress" || event.which) liveComments.liveStart(event, 600);
});
});
</script>

etc · 2013-10-20 10:09:16

Freeant wrote:

I can’t save form comments_display

Could you be more explicit, please? Saving a form is totally unrelated to its content.

Freeant · 2013-10-20 10:38:23

I would like to use your code.

My form comments_display

<h2 id="<txp:text item="comment" />"><txp:comments_invite textonly="1" showalways="1" showcount="0" /></h2>
<txp:comments />
<div id="cwrapper">
<txp:if_comments_allowed>
	<txp:if_comments_preview>
		<div id="cpreview"><txp:comments_preview /></div>
	</txp:if_comments_preview>
	<txp:comments_form isize="25" msgcols="45" msgrows="15" />
<txp:else />
	<p><txp:text item="comments_closed" /></p>
</txp:if_comments_allowed>
</div>

Now I would like to add your code, press ‘save’ but the code <script>….</script> isn’t saved.

<h2 id="<txp:text item="comment" />"><txp:comments_invite textonly="1" showalways="1" showcount="0" /></h2>
<txp:comments />
<div id="cwrapper">
<txp:if_comments_allowed>
	<txp:if_comments_preview>
		<div id="cpreview"><txp:comments_preview /></div>
	</txp:if_comments_preview>
	<txp:comments_form isize="25" msgcols="45" msgrows="15" />
<txp:else />
	<p><txp:text item="comments_closed" /></p>
</txp:if_comments_allowed>
</div>
<script type="text/javascript">
var liveComments = {
liveTimeout: null,
inputElement: null,
liveStart: function(event, timeout) {
	this.inputElement = event.target;
	if(this.liveTimeout) window.clearTimeout(this.liveTimeout);
	if(!timeout) liveComments.livePreview(event);
	else this.liveTimeout = window.setTimeout("liveComments.livePreview(null)", timeout);
},
livePreview: function (event) {
	var form = $("#txpCommentInputForm");
	var valid = true;
	$("*[required]", form).each(function() {
		if(!$(this).val()) valid = false;
	});
	if(!valid) return;
	if(event) event.preventDefault();
	var live = this.inputElement.type != "submit";
	var post = live ? [{name : "preview", value : "Preview"}] : [{name : this.inputElement.name, value : this.inputElement.value}]; 
	post = $.merge(post, form.serializeArray());
	if(!live && $("#txpCommentSubmit").is(":disabled") || this.inputElement.name == "submit")
		$("#cwrapper").load(form.attr("action")+" #cwrapper>*", post);
	else $("#cpreview").load(form.attr("action")+" #cpreview>*", post);
}
};
$(function () {
$("#cwrapper").on("click", "input[type='submit']", function(event) {
	liveComments.liveStart(event, 0);
})
.on("change keypress", "#name, #email, #web, #message", function(event) {
	if(event.type != "keypress" || event.which) liveComments.liveStart(event, 600);
});
});
</script>

Last edited by Freeant (2013-10-20 10:39:09)

etc · 2013-10-20 10:44:51

Are you getting any error messages, like “Form already exists” or something?

Freeant · 2013-10-20 11:11:05

I don’t now what was that. But now everything is saved.
Thanks & Sorry.

etc · 2013-10-22 21:36:06

Gocom wrote:

Oh, and when you do this (fetch DOM, insert it into the DOM), make sure your page doesn’t have inline JavaScript, as it would be executed again if inserted in the DOM, which then will break the page.

jQuery has a nifty feature I was unaware of and wanted to share: when load() is called with a selector, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

Textpattern CMS

Textpattern CMS support forum

#16 2013-10-17 16:37:58

Re: Add comments without reloading?

#17 2013-10-17 17:53:21

Re: Add comments without reloading?

#18 2013-10-17 19:52:57

Re: Add comments without reloading?

#19 2013-10-18 07:46:26

Re: Add comments without reloading?

#20 2013-10-19 16:08:50

Re: Add comments without reloading?

#21 2013-10-20 09:35:56

Re: Add comments without reloading?

#22 2013-10-20 10:09:16

Re: Add comments without reloading?

#23 2013-10-20 10:38:23

Re: Add comments without reloading?

#24 2013-10-20 10:44:51

Re: Add comments without reloading?

#25 2013-10-20 11:11:05

Re: Add comments without reloading?

#26 2013-10-22 21:36:06

Re: Add comments without reloading?

Board footer