Jump to content

Issue with jQuery


Recommended Posts

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?

Edited by Fmdpa
Link to post
Share on other sites

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);

Link to post
Share on other sites

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>

Edited by dsonesuk
Link to post
Share on other sites

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();});

Link to post
Share on other sites

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?

Edited by Fmdpa
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...