0
$(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/

2
  • whats the full url of Handler/Topic.ashx? I can't test on jsfiddle because $.post isn't executing from there Apr 20, 2012 at 18:15
  • It looks like you haven't added the div you trying to select to the DOM yet. You need to either append the div to the DOM or append the data to the str variable i.e. $(str).append(data); Apr 20, 2012 at 18:16

4 Answers 4

2

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 )
   );
});
2
  • I have updated me my question please have a look at it.thks the code you have given works
    – coder25
    Apr 20, 2012 at 19:03
  • @prerna - edited answer for you. I believe you may have better luck modifying your approach.
    – kmfk
    Apr 20, 2012 at 20:27
0

You're calling .append(data) on an element that does not exist yet; it's just something in a string.

I don't think that is a good way to create a new element either. You should use document.createElement() and element.appendChild() or some jquery technique.

0

You switch the following before each other. You can't append on an element that doesn't exist.

var str = "<div id='replytopost"+ divid + "'></div>";
$("#container-" + itemId).append(str); // this has to be added first
$("#replytopost" + divid).append(data);
0

UPDATE: Try this code:

    $(".btnReply").on("click", function() {
    thisvar = $(this).parent()
input = $("<input>")
input.appendTo(thisvar)
$("<br>").appendTo(thisvar)
$("<input>")
.attr("type", "submit")
.appendTo(thisvar)
        .on("click", function() {
        //Handle POST stuff here
        val = input.val()
        $("<div>").addClass("txtCmnt").text(val).appendTo(thisvar)
        })
})​

The problem is

var str = "<div id='replytopost"+ divid + "'></div>";
       $("#replytopost" + divid).append(data);

When you create this div element, it does not automatically get appended to the DOM. So when you are trying to fetch the div:

$("#replytopost" + divid)

it will fail. Here is how you do it:

// Create a div
    var str = $("<div>").attr("id", "replytopost"+divid)
//Access it
    str.append(data)
//Append it to anything
str.appendTo("body")

You have more than one errors of this kind. If you fix them all, it should work.

5
  • str.appendTo("#container-" + itemId); is giving error :- Object doesn't support this property or method
    – coder25
    Apr 20, 2012 at 18:24
  • I rewrote your code (without the $.post stuff) . It is above. Try it here: jsfiddle.net/frp3z Apr 20, 2012 at 18:41
  • ok it works but I have updated my question pls have a look at it
    – coder25
    Apr 20, 2012 at 19:02
  • I am trying to create functionality like this website where topic can have answers and each answer can have comments
    – coder25
    Apr 20, 2012 at 19:19
  • Based on the input we gave you, you should be able to to this. Just repeat the same thing and try it out. You should do some tries by yourself and only when you are failing, you can post a question on this site. Apr 20, 2012 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.