SmileTable – Comments engine

In this post I want to introduce SmileTable comments engine. I must admit I had so much fun with this 😉Comments engine is simillar to post engine but a quite different. For sure there is more jQuery code and other stuff.

On start Let’s talk what I want from comments mechanism.

I need to display comment section after click comment button. In comment section are neccessery  of course single comments, action buttons like take next/previous comment, like button ( not ready yet ), delete button ( not ready yet ) and text area to add new comment.

I don’t need to have all that data after render page body. I will need them after click on comment button.

There is one very important thing. Let’s think we have many posts on page. We need to know which exactly comment button was clicked by user or if we want to display next comments we need to know where we want to append them etc.

That is whay under every single post in HTML I have created div for comments section with id connected to current post. That allow me know to what exactly post comments belong. It looks like this:

For start above div is empty because like i said I don’t need to load that data.
Under every single post I have comments button. I want to after click that button display my comments section. It look like this:

<button type="button" class="btn sharp-btn" onclick="displayComments(@x.PostId)">
    <span class="glyphicon glyphicon-comment"> Komentarze</span>
</button>

Like we see after click that button I invoke displayComments function.

function displayComments(postId) {

    if ($('#single-post-comment-container' + "-" + postId + ':has(*)').length) {
        $('#single-post-comment-container' + "-" + postId).empty();

        sessionStorage.removeItem('currentPostCommentsCount' + postId);
    }
    else {
        getNextComments(postId)
    }
};

 

Inside that function I am checking if comments button was already clicked if was I just hide comment section content. It’s like I wanted to display comments and I don’t want to see them anymore. I will talk about sessionStorage later. Let’s assume that comments button wasn’t clicked so getNextComments function is invoked. It’s look like:

function getNextComments(postId) {

    var skipCommentCountIndex = checkIfAnyPostDataInSessionAndTakeIfExists(postId);

    $.ajax({
        async: false,
        type: 'GET',
        url: '/Home/DisplayComments',
        data: { "postId": postId, "skipCommentCountIndex": skipCommentCountIndex },
        dataType: 'html',
        success: function (data) {

            if (skipCommentCountIndex == 0) {

                var commentsCount = $($.parseHTML(data)).filter('#comments-section-' + postId).find('.sc').length;

                $('#single-post-comment-container' + "-" + postId).append(data);

                sessionStorage.setItem('currentPostCommentsCount' + postId, skipCommentCountIndex + 1)

                if (commentsCount == 3) {
                    $('#take-next-posts' + "-" + postId).show();
                };
                if (commentsCount < 3) {
                    $('#take-next-posts' + "-" + postId).hide();
                }
            }
            else {

                var commentsCount = $($.parseHTML(data)).filter('.sc').length;

                $('#comments-section' + "-" + postId).html(data);

                sessionStorage.setItem('currentPostCommentsCount' + postId, skipCommentCountIndex + 1)

                $('#take-previous-posts' + "-" + postId).show();

                if (commentsCount == 3) {
                    $('#take-next-posts' + "-" + postId).show();
                };
                if (commentsCount < 3) {
                    $('#take-next-posts' + "-" + postId).hide();
                }
            }
        },
        error: function () {
            console.log('error while run getNextComments function');
        }
    });
}

I am not jQuery master and I was not spent many hours to think how to do it best so I believe for sure there is better way to achieve what I did. I am also not happy about that and I will refractore that in future.

On top getNextComments function I am calling checkIfAnyPostDataInSessionAndTakeIfExists function.

Now is a good time to talk about session. Like on server side in ASP.NET MVC we have Session or TempData we also have it on browser side. We have sessionStorage, localStorage and cookies.

Why I am using SessionStorage ?

There was one problem during creating mechanism to display next or previous comments. Like I mentioned I have a lot of posts on page and I will also have comments sections to every single post. If I click please display me next comments button I need to know two things.
Firstly I need to save skipCommentsCountIndex to be sure how many posts I have already displayed. Secondly I need to know that for every single post!
To know that I just create some kind of dictionary and after call function to take more comments from server I save in browser session:

sessionStorage.setItem('currentPostCommentsCount' + postId, skipCommentCountIndex + 1)

In getNextComments function the most important is ajax call. I send to server data about postId and skipCommentCountIndex to exactly know how many comments i need to skip in database and postId say me what exactly comments I need. In response from server I receivce _DisplayComments partial view in case when I want to display all elements from comments section (both comments and textarea for new comment). In other case I receive _DisplayNextComments partial view (If I just want to display next comments for already displayed).

I think there is no big need to have two partial views because It’s not big effort for browser to load that content but I think It’s nice to have that.

In getNextComments function I also have other stuff like show or hide next/previous buttons depends on if there is any next or previous comments. Here is also interesting thing because I return from server html code which I append to div. I don’t return any extra info is in database any more comments or not. I am checking that based how many comments actually was returned. To know that I just filter on div post id how many classes representing my single post is on the page.

There is also second button to display previous posts. It’s simillat to above one. The biggest difference is that I decrement value of skipCommentCountIndex.

Session storage is automatically remove after close tab, I also remove session after close comments section and after refresh page. I think thats is enough.

Add new comment

I just want to mention that to add new comment I use Ajax.BeginForm razor helper method. I use AjaxOptions which update my entire comment container and after update I invoke jQuery method to be sure if there is more comments than I want to display below every single post. If true I enable next comments button.

Advertisements

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s