toggle comments form with jquery

totoff · 2012-07-12 18:46:17

hello forum,

i’m using jquery on a site to hide my comments input form and to display it only upon click on a <h4>. the code is simple and works good (so far …):

	<txp:if_comments_preview>
		<div id="cpreview">
		<txp:comments_preview form="form_comments_preview" />
		</div>
	</txp:if_comments_preview>
	<!-- Comments write section -->
	<h4 id="toggle" >Einen Kommentar schreiben&ensp;↓</h4> <!-- toggle form on/off -->
	<txp:comments_form /> <!-- comments form -->

and my jquery:

	$('h4#toggle').click(function () {
      $('div#newcomment').slideToggle("slow");
    });

however, if visitors hit the preview button, the div#newcomment returns to its hidden state as this is a new page request #cpreview. obviously, i would better like the comment input form to remain open until the send button is hit.

i’m not yet familiar enough with jquery to find a solution (but learning and advancing). is there anybody who can help me somehow?

thanks, christoph

Gocom · 2012-07-12 19:40:06

There are number of option you can do. First an foremost would be to check whether the comment form’s fields have values in them. If they do, you don’t hide the form. For example $('#message').val() would get the contents of the message, which you then can use in your JavaScript. You may also want to check that there is no submission errors present. The field can very well be empty, but the form was still interacted with and sent. You can check for errors by looking for a class comments_error.

After smashing some brain rocks together, and writing few lines, we could get something like this:

$('div#newcomment').filter(function() {
	return $('#message').val() !== '' || $(this).find('.comments_error').length > 0;
}).show();

Which show the form if #message is not empty and no .comments_errors are present. You can also flip it around, and use it to hide the comment form only when it wasn’t sent:

$('div#newcomment').filter(function() {
	return $('#message').val() === '' && $(this).find('.comments_error').length < 1;
}).hide();

Both can also be written in more traditional JavaScript syntax that doesn’t involve callbacks or chaining:

if($('#message').val() === '' && $('.comments_error').length < 1) {
	$('div#newcomment').hide();
}

And displaying option:

if($('#message').val() !== '' || $('.comments_error').length > 0) {
	$('div#newcomment').show();
}

totoff · 2012-07-13 09:50:56

hi jukka,

you must have smashed your brain rocks very well together: the first variant is working out-of-the box like a charm!

this is my code now:

	$('h4#toggle').click(function () {
      $('div#newcomment').slideToggle("slow");
    }); // toggle on click
	$('div#newcomment').filter(function() {
	return $('#message').val() !== '' || $(this).find('.comments_error').length > 0;
	}).show(); // keep comment form open in preview and error mode

what didn’t work is this:

	$('div#newcomment').filter(function() {
	return $('#message').val() === '' && $(this).find('.comments_error').length < 1;
	}).hide();

the disappointing point is, that it is still a little bit over my head why no. one works and no. two not … think i have to take some more jquery lessons …

thanks a lot for helping me (and, on this occasion, for your very helpful plugins too!).

christoph

Gocom · 2012-07-14 17:43:08

totoff wrote:

the disappointing point is, that it is still a little bit over my head why no. one works and no. two not …

The second one hides the block. It will expect that the form is visible by default. If I had to guess, you are hiding the form by default in CSS or somewhere else your in JavaScript.

think i have to take some more jquery lessons …

JavaScript man, JavaScript. It’s all about the language. jQuery is a library mainly meant for DOM manipulation and Ajax.

Textpattern CMS

Textpattern CMS support forum

#1 2012-07-12 18:46:17

toggle comments form with jquery

#2 2012-07-12 19:40:06

Re: toggle comments form with jquery

#3 2012-07-13 09:50:56

Re: toggle comments form with jquery

#4 2012-07-14 17:43:08

Re: toggle comments form with jquery

Board footer