Better way to edit existing comments

Question

I am in the middle of adding some jQuery editing/deleting of existing comments, and I am making kind of a mess so I thought I'd ask for advice on a better way of doing it.

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

Here is test login: testing@problemio.com / testing

If you go to the comments tab and add a comment and then click on edit, the bottom text area for adding the comment does not disappear. But it should since I do a hide() function on it. Here is my code:

Form I am trying to hide:

     <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 you tried to hide does not contains the form and the buttom you want to hide. This is how the html looks like if you look in the code of your web:

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

And after this you have the form. So this is not a jquery problem or error you are just hidden something you do not want to, please review the code that puts the form inside that

or change the selector