How can I insert this block of html into a page from a json response with jquery?

Question

<script type="text/javascript">
var dataString2 = 'run=captchagood&comment=' + comment;
$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString2,
    dataType: "json",
    error: 'error',
    success: function (data) {
        if (data.response === 'captchasuccess') { 
            $('div#loader').find('img.load-gif').remove();
            $('div#loader').append('<span class="success">Thanks for your comment!</span>');
            $('div#loader').hide().fadeIn('slow');
            $('span.limit').remove();
            $('ol#commentlist').prepend(data.comment);
            $('input#submit-comment').unbind('click').click(function () {
                return false;
            });
        };
    }
});
</script>

I need the above to append the below code to a comment list on the current page.

COMMENT-ID-NUMBEER = this will be part of the json response above
COMMENT-POST-DATE = this will be part of the json response above
COMMENT-TEXT = this will be part of the json response above

USER-GENDER = this is in the PHP session
USER-IMAGE-URL = this is in the PHP session
USER-NAME = this is in the PHP session

Here is what I need to insert into the page, the below code but with the items I list directly above to be inserted into the proper locatons as well.

<ol class="commentlist" id="commentlist">


    <!-- START Comment block -->
    <li class="thread-even"  id="COMMENT-ID-NUMBEER"> 
     <div class="photocolumn"> 
      <div class="imageSub" style="width: 100px;"> 
       <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
       <div class="blackbg"></div>
       <div class="label">USER-NAME</div>
      </div>
     </div>
        <div class="commenttext"> 
         <span class="comment_date">COMMENT-POST-DATE</span>
      <p>COMMENT-TEXT</p> 
     </div> <!-- END COMMENTTEXT -->
     <div class="modcolumn">
      <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
      Delete
     </div>
    </li> 
    <!-- END comment block-->

</ol>

Another question, the list cells alternate background color in my script, so how could I make it insert class="thread-even" or class="thread-odd" depending on the last item?

Answer 1

I recommend having that block of html already hidden on the page as a template. When you get your ajax response, clone it with jquery, insert instance specific data, and then append it to your page.

To alternate the comment classes, simply check the last one and use the opposite class. Of course, you'll need a default class for the first comment.

Example:

Have this somewhere on your page, hidden by CSS or javascript:

<!-- START Comment block -->
<li class="thread-even"  id="comment_template"> 
    <div class="photocolumn"> 
            <div class="imageSub" style="width: 100px;"> 
                    <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
                    <div class="blackbg"></div>
                    <div id="username" class="label">USER-NAME</div>
            </div>
    </div>
    <div class="commenttext"> 
            <span class="comment_date">COMMENT-POST-DATE</span>
            <p>COMMENT-TEXT</p> 
    </div> <!-- END COMMENTTEXT -->
    <div class="modcolumn">
            <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
            Delete
    </div>
</li> 
<!-- END comment block-->

Next, in your success callback, you will need to do what I stated above. Here is an example to get you started:

//clone your template
var comment = $('#comment_template').clone();

//insert instance specific data
$('#username', comment).html(USERNAME);
$('.comment_date', comment).text(DATE);
//do the rest

//append it to your page
$('#commentlist').append(comment);

Answer 2

jTemplates should fit the bill. Go directly to the download, it includes a sample project with what you're after...or try a few blog posts on it for quick examples. It's intent is for repeated segments, but it works just fine for anything templated whether it repeats or not.

Answer 3

Why not make your server side return that HTML as one of the keys to your JSON object. You should already have all that logic to display a comment prepared, so returning the "HTML Formatted" version of it in data.htmlComment wouldn't be that hard.

Answer 4

In response to your second question:

"Another question, the list cells alternate background color in my script, so how could I make it insert class="thread-even" or class="thread-odd" depending on the last item?"

test if the last element has the even class, if it is, give it the odd class and vice-versa:

if ( $("#mylist > :last").is(".thread-even") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-odd');
} else if ( $("ul > :last").is(".thread-odd") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-even');
}

the selector used selects the last child of the id specified. Once you have appended the last child should be the thing you need to give the new class to, so you can use the same selector ;) There may be a better way to fit this into your code, but the snippet should give you what you need to get it working... good luck :)