Question

I am playing around with this page: http://www.problemio.com/problems/problem.php?problem_id=228

To reproduce the problem, log in with this: [e-mail] / testing

Then click on the “comments” tab and click on edit wherever you see that option inside the edits tab. You will see that the <br /> are still there, but to create that edit form, here is the JavaScript I use to make the html for that form:

// Edit comment
$('.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;
        //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();

                    // 1) close that piece of HTML
                    $("#" + div_name).hide();  // Works

                    problem_comment_text = problem_comment_text.replace(/\n/g,"<br />");

                // 2) Make an HTML form and display it in that piece of HTML
                var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";

                // Now replace the current form with the crap I made above.
                $("#" + div_name).html( new_comment_form );  // Works
                $("#" + div_name).show(  );  // Works

                // 3) Hide the other text area form.
                $("#comment_bottom_text").hide(); // TODO - MAKE THIS WORK
                $(".comment_form").hide();                                              
            },
            error: function(json) // Error for checking if user is logged in.
            {
                // Showing the wait image
                $("#loading").hide();                    

                $("#loginpopup").dialog();

                return false;           
            }
    });
    }         

 return false;
});     

So you see I try to replace the <br /> with \n and it kind of works, but if you do the same thing again with the same comment, it places </a> tag in there. Any idea why that happens and how to stop it? Its weird because it happens on the second time editing a comment and not the first.

Answer 1

You can do this to help you replace <br> with \n:

problem_comment_text.replace(/<br>/gi, '\n');

Hope it helps.