Better way to edit existing comments
<p>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.</p>

<p>Here is a test page: <a href="http://www.problemio.com/problems/problem.php?problem_id=228" rel="nofollow">http://www.problemio.com/problems/problem.php?problem_id=228</a></p>

<p>Here is test login: testing@problemio.com / testing</p>

<p>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:</p>

<p>Form I am trying to hide:</p>

<pre><code>     &lt;p class="comment_bottom_text"&gt;
          &lt;!-- Make a form for people to add comments --&gt;
          &lt;form id="add_comment" name="problem_comment_form" method="post"&gt;
               &lt;p&gt;
                  &lt;textarea name="problem_comment" cols=70 rows=6 id="problem_comment"&gt;&lt;/textarea&gt;
               &lt;/p&gt;
               &lt;p&gt;
                  &lt;input type="hidden" id="comment_problem_id" name="problem_id" value="&lt;?php echo $problem_id; ?&gt;" /&gt;

                  &lt;span class="error"   id="add_message_error" style="display:none"&gt; Please Enter Valid Data&lt;/span&gt;
                  &lt;span class="success" id="add_message_success" style="display:none"&gt; Message Added Successfully!&lt;/span&gt;

                  &lt;input type="submit" class="button" value="Add Message"&gt;&lt;/input&gt;
               &lt;/p&gt;
          &lt;/form&gt;
     &lt;p&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$('.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 + '&amp;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 = "&lt;form id='add_comment' method='post'&gt;&lt;p&gt;&lt;textarea name='problem_comment' cols=60 rows=6 id='problem_comment'&gt;" + problem_comment_text + "&lt;/textarea&gt;&lt;/p&gt;&lt;p&gt;&lt;input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "'&gt;&lt;input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "'&gt;&lt;/p&gt;&lt;p&gt;&lt;input type='submit' class='button' value='Edit Message'&gt;&lt;/input&gt;&lt;/p&gt;&lt;/form&gt;";

                    // 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;
});    
</code></pre>
