Best way to edit existing comments

Question

I'm in the middle of adding some jQuery editing / deleting existing comments, and I'm making a mess, so I thought I would ask for advice on the best way to do this.

Here is the test page: http://www.problemio.com/problems/problem.php?problem_id=228

Here is the test entry: [e-mail] / testing

If you go to the comments tab and add a comment, and then click "Edit", the lower text area to add a comment will not disappear. But this has to be since I execute the hide () function on it. Here is my code:

The form I'm trying to hide is:

<p class="comment_bottom_text"> <!-- Make a form for people to add comments --> <form id="add_comment" name="problem_comment_form" method="post"> <p> <textarea name="problem_comment" cols=70 rows=6 id="problem_comment"></textarea> </p> <p> <input type="hidden" id="comment_problem_id" name="problem_id" value="<?php echo $problem_id; ?>" /> <span class="error" id="add_message_error" style="display:none"> Please Enter Valid Data</span> <span class="success" id="add_message_success" style="display:none"> Message Added Successfully!</span> <input type="submit" class="button" value="Add Message"></input> </p> </form> <p> 

JQuery

 $('.edit_comment').live('click' , function() { // Showing the wait image $("#loading").show(); var problem_id = $(this).attr("data-problem_id"); var problem_comment_id = $(this).attr("data-problem_comment_id"); var problem_comment_text = $(this).attr("data-problem_text"); // problem_comment_text_'.$problem_comment_id.' var div_name = "problem_comment_text_" + problem_comment_id; //alert ("div name: " + div_name ); //var dataString = 'problem_id='+ problem_id + '&problem_comment_id=' + problem_comment_id; // Now validate the input if( problem_id == '' || problem_comment_id == '' ) { //$('#add_message_success').fadeIn(200).hide(); //$('#add_message_error').fadeOut(200).show(); } else { // Check if the person is logged in. // Now check if the person is logged in. $.ajax({ type: "POST", url: "/auth/check_login.php", dataType: "json", success: function(data) { $("#loading").hide(); //Maybe just switch up how the forms look like here. // 1) close that piece of HTML // Get the name of that piece of HTML. // problem_comment_'.$problem_comment_id.' // Close div named: $("#" + div_name).hide(); // Works // 2) Make an HTML form and display it in that piece of HTML var new_comment_form = "<form id='add_comment' method='post'><p><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea></p><p><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "'><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "'></p><p><input type='submit' class='button' value='Edit Message'></input></p></form>"; // Now replace the current form with the crap I made above. $("#" + div_name).html( new_comment_form ); // Works $("#" + div_name).show( ); // Works //alert("before hide"); // 3) Hide the other text area form. $(".comment_bottom_text").hide(); // TODO - MAKE THIS WORK //alert("after hide"); // 4) Give a cancel button to undo the whole thing I did here. }, error: function(json) // Error for checking if user is logged in. { // Showing the wait image $("#loading").hide(); $("#loginpopup").dialog(); return false; } }); } return false; }); 

Answer 1

The problem is that the html element that you tried to hide does not contain the form and the part that you want to hide. Here's what the HTML looks like if you look in the code of your website:

 <p class="comment_bottom_text" style="display: none; "> <!-- Make a form for people to add comments --> </p> 

And after that you have a form. So this is not a problem or jquery error, you just hide what you don’t want, look at the code that puts the form inside this

or changes the selector