April 22, 2012

unable to create multiple div inside div dynamically

Question by prerna

$.post("../../Handler/Topic.ashx", 
       { commentclob: commentClob, 
         commenttitle: commentTitle,
         topicId: id, 
         Button: buttoname },
       function (data) {
         obj = jQuery.parseJSON(data);
         var $table = $('<table/>').addClass('commentbox');

         $table.append('<tr><td>' + 
                       'Comment Id:' + 
                       obj.CommentId + 
                       '</td></tr>');

        var includeReply = "<input type='button' 
                                   class='btnReply' 
                                   value='Reply' 
                                   id='btnReply-" + obj.CommentId + "' />";


        $("#commentContainer").prepend(
          $('<div/>').attr('id', '#comment-' + obj.CommentId)
                     .append($table)
        );

        //This doesnt work         
        $("#comment-" + obj.CommentId).append(
          $('<div/>').attr('id', '#container-' + obj.CommentId)      
                     .append(includeReply)
        );
});

html

  <div id="commentContainer"></div>

I am successfully able to append div with #comment-id to comment-container but I am unable to append another div inside #comment-id.

I have tried

               var str = $("<div>").attr("id", "#container-" + obj.CommentId)
               $(str).append(includeReply);
               $table.append('<tr><td>' + 'CommentDiv:' + str + '</td></tr>');

But it gives

CommentDiv:[object object]

Answer by Starx

str is an HTML object so it can concatenated like that. You have to extract the markup with .html() and then concatenate it.

   var str = $("<div>").attr("id", "#container-" + obj.CommentId)
   $(str).append(includeReply);
   $table.append('<tr><td>' + 'CommentDiv:' + str.html() + '</td></tr>');
April 17, 2011

Ajax comments insert LI or replace UL?

Question by Aen Tan

I’m ajaxifying my comments feature and I’m choosing between 2 strategies. My comments list is an unordered list.

  1. Replace UL in DOM with UL from response.
  2. Insert last LI from response into UL in DOM.

The first option is simpler but I feel like it’s not the best or right way.
If I want to use the second option how do I know which comments in the response are newer than the ones in the DOM if more than one comment was posted at the same time?

Thoughts?

Answer by JohnP

You can keep the timestamp as a variable for JS to refer.

When you load the page, your server side language will assign the timestamp of the last comment to be loaded to a javascript variable. From there on, everytime you load more comments, send the last timestamp you requested. Your server side language will check for comments that are newer than that timestamp. Make sure to update the timestamp as you send out more requests. Either by sending it as part of the response or keeping track of when you sent the request.

Answer by Starx

You should append the comment’s UL with latest LIs. Why? you do not have to grab all the full UL list and replace the old one. Reduce the changes that has to be made. Just grab the latest LI and append it at the last. LESS WORK MORE EFFICIENT

So far of your question, about how to know which one is the latest comment. Store timestamp as the comments are stored in the DB. While also fetching the comments for the first time, try to assign the variable holding the timestamp of the last item, then after search the database for everything that is greating the timestamp you stored, get the list and append them, then update the variable, with the latest time stamp again.

...

Please fill the form - I will response as fast as I can!