Appending to DOM

Question

I'm trying to append, in one way or another, results from an ajax post in a commenting system. I've tried many different ways but they all seem to fail in one way or another.

The HTML for the comments is:

@using ( Html.BeginForm( ) )
{
    <ul class="commentList">
    @foreach ( var comment in Model )
    {
        <li>
            <a href="http://www.google.com"><img src='@Url.Content("~/Images/User.png")' alt="User" /></a>
            <div class="commentBody">
                <a href="http://www.google.com">@comment.UserName </a>
                <span>@comment.CommentText </span>
                <div>
                    <abbr title='@comment.CommentDate '>@comment.CommentDate.ToString( "dd. MMMM HH:mm" )</abbr>
                    <a href="#" class="likar">Like</a>
                </div>
            </div>
        </li>
     }
        <li class="commentAdd">
            <textarea id="CommentText" name="CommentText" rows="3" cols="20"></textarea>
            <label>
                <input type="submit" value="Write comment" />
            </label>
            @Html.ValidationMessage( "CommentText" )
        </li>
    </ul>
}

Here is my script:

$('input[type="submit"]').click(function(event){

    // Prevent the default behaviour.
    event.preventDefault();
    var form = $(this).parent();
    var PostComment = { "comment": $("#CommentText").val() };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Home/AddComment/",
        data: JSON.stringify(PostComment),
        dataType: "json",
        success: function (data) {
            var commentEntry = $('<li/>');
            commentEntry.append('<a href="http://www.ru.is"><img src=\'@Url.Content("~/Images/User.png")\' alt="User" /></a>');
            var diver = $('<div/>').addClass('commentBody');
            diver.append('<a href="http://www.google.com">').text(data.name).append('</a>');
            diver.append($('<span/>').text(data.comment));
            var diver2 = $('<div/>');
            diver2.append('<abbr title=\' ');
            diver2.append().text(data.timeOf);
            diver2.append('\'>');
            diver2.append().text(data.timeOf);
            diver2.append('</abbr><a href="#" class="likar">Like</a>');
            diver.append(diver2);
            commentEntry.append(diver);
            $(".commentAdd").before(commentEntry);
            // reset the form.
            form[0].reset();

        },
        error: function (xhr, err) {
            // Note: just for debugging purposes!
            alert("readyState: " + xhr.readyState +
            "\nstatus: " + xhr.status);
            alert("responseText: " + xhr.responseText);
        }
    });
});

PostComment class is like this:

    public class PostComment
{
    public string comment { get; set; }
    public string name { get; set; }
    public string timeOf { get; set; }
}

The time of is set like this in the HomeController - AddComment

c.timeOf = DateTime.Now.ToString("yyyy-dd-MM HH:mm:ss");

where c is an instance of PostComment class.

I simply can't get the right approach of append. If I use it like this, the line where I appen date.name will not add the "a href" element to the DOM. Any ideas? Because I've tried what I can and am out of ideas.

Answer 1

You can't use .append() the way you are. You can append only complete elements, not closing tags:

You could try something like:

success: function(data) {

    var diver2 = $('<div>')
        .append($('<abbr>').attr('title', data.timeOf))
        .append('<a href="#" class="likar">Like</a>');

    var diver = $('<div>').addClass('commentBody')
        .append('<a href="http://www.google.com">' + data.name + '</a>')
        .append($('<span>').text(data.comment))
        .append(diver2);

    var commentEntry = $('<li>')
        .append('<a href="http://www.ru.is"><img src=\'@Url.Content("~/Images/User.png")\' alt="User" /></a>')
        .append(diver);

    $('.commentAdd').before(commentEntry);

    // reset the form.
    form[0].reset();
}

Notice the use of the .attr() method to set the "title" attribute of the <abbr> element.