Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2013-10-16 12:58:49
- alivato
- Member
- Registered: 2011-03-31
- Posts: 152
Add comments without reloading?
My site, each article consists of 30 ~ 45 pictures plus text. When you add a new comment, the page is reloaded and pictures are loaded again.
How to solve this problem?
Make it somehow without rebooting (ajax).
However, I understand that bad.
Do not use the commenting system similar disqus, cackle, …
Last edited by alivato (2013-10-16 13:04:37)
Offline
#2 2013-10-16 16:43:58
- alivato
- Member
- Registered: 2011-03-31
- Posts: 152
Re: Add comments without reloading?
The question has been already asked but nobody has answered it.
http://forum.textpattern.com/viewtopic.php?id=38663
Offline
Re: Add comments without reloading?
comments_display form, using jQuery:
<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">
$(function () {
$("#cwrapper").on("click", "#txpCommentPreview", function(event) {
event.preventDefault();
var form = $("#txpCommentInputForm");
var post = $.merge([{name : "preview", value : "Preview"}], form.serializeArray());
$("#cwrapper").load(form.attr("action")+" #cwrapper>*", post);
});
});
</script>Last edited by etc (2013-10-16 18:19:01)
Offline
Re: Add comments without reloading?
alivato a écrit:
and pictures are loaded again.
this is not normal!
Normally, the images should be loaded from the browser cache.
Offline
Re: Add comments without reloading?
As sacripant says, images should be cached by the browser on first load. Then any subsequent loads the images are fetched from cache not downloaded again (until you empty the cache or the cache rules expire).
You can adjust caching rules in your .htaccess file, see here for some handy tips
To be honest any decent web server setup should already have fairly adequate caching rules in place, but stating them yourself won’t hurt.
Offline
#6 2013-10-16 21:03:34
- alivato
- Member
- Registered: 2011-03-31
- Posts: 152
Re: Add comments without reloading?
About the cache is good, but I had wanted to do this without rebooting.
etc
I replaced the code within the form comments_display. But page still reloads.
Maybe I’m doing something wrong…
Offline
Re: Add comments without reloading?
etc wrote:
$("#cwrapper").on("click", "#txpCommentPreview", function(event) {
You should listen for form submit events instead of individual button clicks.
If you go for Ajax comment submissions, you can also remove the preview step too; automate it. Fetch the preview form contents, send that form, update comments list. 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.
Offline
Re: Add comments without reloading?
alivato wrote:
I replaced the code within the form comments_display. But page still reloads.
Maybe I’m doing something wrong…
You have to include jQuery first, for example in <head>:
<!-- shouldn't use the latest, but I don't care -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>Gocom wrote:
You should listen for form submit events instead of individual button clicks.
That’s true, but serializeArray() does not include submit type inputs, so we have to detect somehow which button was clicked. If you know an easy way to detect what form data will be submitted before the submission occurs, I’m interested. Anyway, when a form is submitted, some click event is triggered (on the first button?). One could replace $("#cwrapper").on("click", "#txpCommentPreview", ...) by $("#cwrapper").on("click", "input[type='submit']", ...) if needed:
$("#cwrapper").on("click", "input[type='submit']", function(event) {
event.preventDefault();
var form = $("#txpCommentInputForm");
var post = $.merge([{name : event.target.name, value : event.target.value}], form.serializeArray());
$("#cwrapper").load(form.attr("action")+" #cwrapper>*", post);
});If you go for Ajax comment submissions, you can also remove the preview step too; automate it. Fetch the preview form contents, send that form, update comments list.
That wasn’t required in the OP.
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.
The script is outside $("#cwrapper").
Offline
#9 2013-10-17 09:44:55
- alivato
- Member
- Registered: 2011-03-31
- Posts: 152
Re: Add comments without reloading?
thx, etc. I wrote to your email.
Last edited by alivato (2013-10-17 10:45:08)
Offline
Offline
Re: Add comments without reloading?
Once this is sorted it might become a very useful txp tip for many.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Add comments without reloading?
etc wrote:
but serializeArray() does not include
It contains all inputs from the form; it could never be used to detect which button is clicked as its not event driven.
If you know an easy way to detect what form data will be submitted before the submission occurs, I’m interested
Depends what is primary action, and given that you do default to different action. Do primary on submit, others on click. Or trigger submit on click, change behavior on click and continue to submit etc. For instance you could pass variable from click handler to submit and change the submit handlers action, or toggle the event handlers off/on. E.g.
var form = $('form');
form.on('click', '#submit-poop', function ()
{
form.data('step', 'save');
});
form.on('click', '#preview-poop', function ()
{
form.data('step', 'preview');
});
$('form').on('submit', function (e)
{
if (form.data('step') === 'save')
{
return; // skip;
}
e.preventDefault();
$.ajax({urlandstuff}).done(function ()
{
// Loaded; change default action to save.
form.data('step', 'save');
});
});Anyway, when a form is submitted, some click event is triggered (on the first button?)
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.
$(“#cwrapper”).on(“click”, “input[type=‘submit’]”, …)
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.
That wasn’t required in the OP.
Just a suggestion what you could do, not commenting on your code in any shape or form.
The script is outside $(“#cwrapper”).
In general, meaning all scripts, not yours specifically.
Offline
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