Question

I have some jquery that takes the value of a textbox, inserts it into a mysql database and then appends a container, thereby adding another comment. Everything works except the success function which is supposed to append the container and clear the value, neither of these happen.

JQUERY:

  $('.commentBox').keypress(function(e) {

    if(e.which == 13) {
        e.preventDefault();

             if ($.trim($(this).val()) == ""){
                $('#nocomment').modal('show');
             }
             else {


   var form = $(this).closest('.commentForm'); 
   var commentbox = $(this).val();

   $.post('../comment.php' , form.serialize() , function(response){

            commentbox.val('');     
            form.closest('.commentContainer').append(response);


    });
    }
    }
});

when i alert(response) the result is perfect (its a div).

HTML:

<div class='commentContainer'>
<form class='commentForm'>
<input type='hidden' name='record_id' value='$answerid[$f]' />
<input type='hidden' name='question_id' value='$q' />";
<input type='text' class='commentBox' placeholder='...comment' name='comment' autocomplete='off' />";

Answer 1

Just a wild guess but is it possible that jQuery is failing to match a form.closest('.commentContainer').

Do try to run it on Firefox with Firebug installed and so some console.log(...) to see if the code is running correctly.

$.post('../comment.php' , form.serialize() , function(response){
    console.log('code gets here'); // simple test
    console.log(form.closest('.commentContainer')); // check if element is valid

    commentbox.val('');
    form.closest('.commentContainer').append(response);
});