Invalid Jquery Descriptor

Question

I have jQuery AJAX code that takes the contents of a text area and adds it to a MySQL database. At the end of this, I would like to add this content to the div . This div already has other divs inside, so I think I should use the .append() function to add a new div . However, this does not work.

.commentContainer is a div I would like to add an answer. Output signal comment.php :

  <div>$comment</div> 

Jquery:

 <script type='text/javascript'> $('document').ready(function () { $("form").on("submit", function (e) { e.preventDefault(); var $form = $(this); var commentbox = $(this).children('.commentBox'); $.ajax({ "url": $form.attr("action"), "data": $form.serialize(), "type": $form.attr("method"), success: function (response) { commentbox.val(''); $(this).closest('.commentContainer').append(response); //this line isnt working } }); }); }); </script> 

Answer 1

Since you are already caching the allocation of $(this) in the variable $form , just reference it instead of using $(this) everywhere:

 $('document').ready(function () { $("form").on("submit", function (e) { e.preventDefault(); var $form = $(this), commentbox = $form.children('.commentBox'); $.ajax({ url : $form.attr("action"), data : $form.serialize(), type : $form.attr("method"), success : function (response) { commentbox.val(''); $form.closest('.commentContainer').append(response); //this line isnt working } }); }); }); 

UPDATE

Thanks for submitting your HTML, it seems that the .commentContainer element is a child of the form element, so you want to change:

 $form.closest('.commentContainer').append(response); 

To:

 $form.siblings('.commentContainer').append(response);