Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Add comments without reloading?
Gocom wrote:
It contains all inputs from the form;
Except submit type inputs and buttons (plus unsuccessful controls), whence the need for $.merge().
Click event is executed as you are clicking a button. The click event is ran before submit and the preventDefault() just prevents the normal normal click behavior, cutting the chain before submit.
That might be browser-dependent, but under Firefox, when I submit the comment form pressing Enter, the js code runs anyway, as if “Preview” button were clicked. From what I’ve read, there is no formal rules as for the browser choice of submit input when a form is submitted some no-click way, but it seems to be the first one under HTML5.
Doesn’t that attach the event to both Preview and Submit buttons, tho. That is using bubbling (listens on #cwrapper, filters based on event.target). If you are willing to listen both actions, you may also have to add some code to load the resulting comment list and thank you message.
Yes, it does, and enables ajax form submitting (i.e. not only previewing) in my second snippet too.
I’m currently testing it on my site, anyone is welcome to preview/post a comment to see it in action.
Offline
Re: Add comments without reloading?
colak wrote:
Once this is sorted it might become a very useful txp tip for many.
Yes please! Been a bit quiet over there recently as I’m struggling with time and the day job.
Offline
Re: Add comments without reloading?
colak wrote:
Once this is sorted…
One does not live this long. :) Well, that seemingly was outdated jQuery version problem, seemingly solved now, you can test on alivato site if he does not mind.
Offline
Re: Add comments without reloading?
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?
Offline
Re: Add comments without reloading?
etc wrote:
I’d like to know if there exists a pure
onsubmitway: 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 event1. The submit event will always target a formElement.
1 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)
Offline
Re: Add comments without reloading?
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.
Offline
#19 2013-10-18 07:46:26
- Freeant
- Member
- Registered: 2012-04-16
- Posts: 36
Re: Add comments without reloading?
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.
Offline
Re: Add comments without reloading?
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)
Offline
#21 2013-10-20 09:35:56
- Freeant
- Member
- Registered: 2012-04-16
- Posts: 36
Re: Add comments without reloading?
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>Offline
Re: Add comments without reloading?
Freeant wrote:
I can’t save form comments_display
Could you be more explicit, please? Saving a form is totally unrelated to its content.
Offline
#23 2013-10-20 10:38:23
- Freeant
- Member
- Registered: 2012-04-16
- Posts: 36
Re: Add comments without reloading?
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)
Offline
Re: Add comments without reloading?
Are you getting any error messages, like “Form already exists” or something?
Offline