Comment Thread

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#assessmentsPane">Assessments</a></li>
    <li><a data-toggle="tab" href="#commentsPane">Comments</a></li>
    <li><a data-toggle="tab" href="#notesPane">Notes</a></li>
    <li><a data-toggle="tab" href="#researchPane">Research</a></li>
    <li><a data-toggle="tab" href="#mitigationPane">Mitigation</a></li>
</ul>
<div class="tab-content">
    <div id="assessmentsPane" class="tab-pane fade in active">
        <h3>Assessments</h3>
        <div id="commentsList">Some content.</div>
        <button id="testClick" class="btn btn-primary">
            List Comments
        </button>
    </div>
    <div id="commentsPane" class="tab-pane fade">
        <h3>Comments</h3>
        <p>Some content in menu 1.</p>

    </div>
    <div id="notesPane" class="tab-pane fade">
        <h3>Notes</h3>
        <p>Some content in menu 2.</p>
    </div>
    <div id="researchPane" class="tab-pane fade">
        <h3>Research</h3>
        <p>Some content in Research.</p>
    </div>
    <div id="mitigationPane" class="tab-pane fade">
        <h3>Mitigation</h3>
        <p>Some content in mitigation.</p>
    </div>
</div>
<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <i class="fa fa-comment" aria-hidden="true" title="Comment"></i>
        </div>
        <div class="media-body">
            <h4 class="media-heading">
				LNO Comment
				<span class="small"> - Candice Rice</span>
				<div class="pull-right small">
					11/22/2015
				</div>
			</h4>
            <div class="panel panel-default">
                <div class="panel-body">
                    This is some...

JavaScript

/* bootstrap-comments.js 0.0.1
 * (c) 2016 Novetta
 * bootstrap-comments may be freely distrubuted under the MIT license
 */

var commentFeed = {
    "comments": [{
        "commentId": "1",
        "parentId": "0",
        "refCommentTypeId": "1",
        "objectName": "",
        "recordId": "",
        "topic": "test topic",
        "text": "This is sample data.",
        "classificationName": "Unclassified",
        "refClassificationId": "0",
        "archived": "0",
        "createdDt": "11/12/2015",
        "createdById": "112",
        "lastUpdatedDt": "11/12/2015",
        "lastUpdatedById": "112",
        "authorName": "Stryker, William",
        "refUserRoleId": "2",
        "authorRole": "Analyst",
        "responseList": [{
            "commentId": "4",
            "parentId": "0",
            "refCommentTypeId": "1",
            "objectName": "",
            "recordId": "",
            "topic": "test topic",
            "text": "This is sample data.",
            "classificationName": "Unclassified",
            "refClassificationId": "0",
            "archived": "0",
            "createdDt": "11/12/2015",
            "createdById": "112",
            "lastUpdatedDt": "11/12/2015",
            "lastUpdatedById": "112",
            "authorName": "Stryker, William",
            "refUserRoleId": "2",
            "authorRole": "Analyst",
            "responseList": []
        }]
    }, {
        "commentId": "2",
        "parentId": "0",
        "refCommentTypeId": "2",
        "objectName": "",
        "recordId": "",
        "topic": "test topic",
        "text": "This is sample data.",
        "classificationName": "Unclassified",
        "refClassificationId": "0",
        "archived": "0",
        "createdDt": "11/12/2015",
        "createdById": "112",
        "lastUpdatedDt": "11/12/2015",
        "lastUpdatedById": "112",
        "authorName": "Stryker, William",
        "refUserRoleId": "2",
        "authorRole": "Analyst",
       ...