Issue with jQuery

[Fmdpa]

I'm trying to create a post edit feature. I'll avoid going through all the dynamic PHP stuff, but here is the generated HTML:

<li>    <div class="c_post">        <div class="c_name">myName            <span class='c_time'> on September 28, 2010 4:37PM                <img src="/PNG/plain_edit.png" alt="edit post" title="Edit Your Comment" class="18" id="post_edit" />            </span>        </div>        <p class="comment_post">myName and comment</p>        <textarea class="update_comment">myName and comment</textarea>    </div></li>

The textarea is set in the css to display:none; .My objective is to slideUp the comment <p></p>, and slideDown the textarea when the image (#post-edit) is clicked.

$('img#post_edit').click(function() {   $(this).next('.comment_post').slideUp(500).next('textarea.update_comment').slideDown(500);});

This did not work. Nothing responded at all in any way. The jQuery file is including properly because I have other jQuery code on the page that works. Just to see if it was running the function when the image was clicked, I did this:

$('img#post_edit').click(function() {   $(this).fadeOut("slow");});

which ran successfully. What are your thoughts?

[chibineku]

I think the problem is the chained .next() methods. Try splitting it into two statements, or try using .end() to reset the chain to $(this):

$(this).next('.comment_post').slideUp(500).end().next('textarea.update_comment').slideDown(500);

[dsonesuk]

you are trying to target a sibling 'comment_post', from 'post_edit', which does not exist, you want to target 'comment_post' from the parent 'div.c_name' instead.try$('img#post_edit').click(function() { $(this).parents('div.c_name').next('.comment_post').slideUp(500).next('textarea.update_comment').slideDown(500); });<div class="c_post"><!-- outer parent --><div class="c_name"> <!-- child to outer parent, sibling to p.comment_post, and textarea.update_comment -->to myName<span class='c_time'><!--child to div.c_name, no sibling -->on September 28, 2010 4:37PM<img src="/PNG/plain_edit.png" alt="edit post" title="Edit Your Comment" class="18" id="post_edit" /><!-- child to div.c_time, has no sibling, lonely child, for your script to work, p.comment_post and textarea.update_comment would need to be directly below it--></span></div><p class="comment_post">myName and comment</p> <!-- child to outer parent, sibling to div.c_name, and textarea.update_comment --><textarea class="update_comment">myName and comment</textarea> <!-- child to outer parent, sibling to p.comment_post, and div.c_name --></div>

[Fmdpa]

Thanks dsonesuk and chibineku. I altered that last example a bit, and came up with this working example.

$('img#post_edit').click(function() {$(this).parents('div.c_name').children('.comment_post').slideUp(500).next('textarea.update_comment').fadeIn();});

[Fmdpa]

Ok, I'm back. I am trying to implement an asynchronous comment edit system. It works just fine as far as the main back-end goes, but if you update the comment more than once, I get some display issues...well, the comment actually doesn't display at all.

$('img#post_edit').click(function() {		$(this).parents('li.c_post').children('p').slideUp().next('textarea.update_comment').fadeIn().focus().next('p#complete_edit').slideToggle(1000);		$(this).parents('li.c_post').attr('id', 'edit_status');		$("p#complete_edit").slideDown().text('Click outside the textbox to complete the edit.');				$(this).parents('li.c_post').children('textarea.update_comment').change(function() {		var id = $(this).parents('li.c_post').find('img#post_edit').attr('class');		var post = $(this).val();		$.post(			'/update_comment.php', {				'id' : id,				'post' : post			},				function(html){					$('li#edit_status textarea').slideUp();					$('li#edit_status p.comment_post').slideDown().html(html);					$("p#complete_edit").text('Comment updated successfully!');				});				}	   );});

It works perfectly the first time you edit the comment, but if you edit the comment more than once without refreshing the page, the textbox will slide up, and leave you with an blank space (where the edited comment should be displayed). I couldn't figure out what was going until I looked in firebug. I noticed that each time I made the update, it posted as many times as that comment had been updated without a page refresh. So If I had edited it 3 times, it would make 3 POSTs at the same time, the fourth time: 4 POST requests, and so on.How would I fix this?