Question

$(function() {
    $(".commentbox .btnReply").click(function() {
        $(this).hide();
        var id = $(this).attr("id").split("-")[1]
        var strDiv = "<input type='text' class='txtCmnt' id='txtReply-" + id + "' /> <input type='button' class='btnSave' value='Save' id='btnSave-" + id + "' /> ";
        $("#container-" + id).html(strDiv);
    });
    var i = 1;
    $(".commentbox").on("click", ".btnSave", function() {
        var itemId = $(this).attr("id").split("-")[1]
        var txt = $(this).parent().find(".txtCmnt").val();
        var divid = itemId + "-" + i;

 i++;
            alert("i" + i);
        alert("replypostid" + divid);

        $.post("Handler/Topic.ashx", {
            reply: txt,
            id: itemId
        }, function(data) {
            alert(data);
            var str = "<div id='replytopost" + divid + "'></div>";
            $("#replytopost" + divid).append(data);

            $("#container-" + itemId).append(str);


        })

    });
});  

I want to append data returned from post function to a dynamically created div which is appended to another div.

The jsfiddle link is
http://jsfiddle.net/UGMkq/49/

alert(data) is printing correct output but div with data is not getting appended .

Edited

If I click first save button it is giving replypostid1-1 and then
when I click second button alert is giving replypostid2-2 instead I want replypostid2-1

http://jsfiddle.net/UGMkq/50/

Answer 1

you are creating a string, then trying to append to it as if it existed in the DOM. Instead, try this:

$("#container-" + itemId).append(
   $('<div/>')
      .attr('id', '#replytopost'+divid)
      .append( data )
);

edit

I don’t think relying on keeping a counter in Javascript to handle the reply count is a good solution. If the page is refreshed, that counter is lost/reset.

If this app is database driven, you should be able to get a count of current replies from the database and have better data consistency – have that passed back with the ajax call – maybe as a json object. This will allow you to avoid keeping and incrementing that counter in JS.

$.post("Handler/Topic.ashx", { reply: txt, id: itemId }, function(data) {
   //Assuming a json object like { "id": 1, "text": "What ever data equals now" }
   var reply = JSON.parse( data );
   $("#container-" + itemId).append(
      $('<div/>')
         .attr('id', '#replytopost'+itemId+'_'+reply.id)
         .append( reply.text )
   );
});