Getting the value of the child of sibling jquery/ajax?

Question

I'm currently trying to make a ajax comment function work once a user clicks "open comments".

Currently I'm getting data back from my php script and the status of the ajax call is "200 OK" so it definetely works but I'm just unable to get the correct value for the current comment which has been clicked on in order to post it to the php script.

What I'm asking is how do I get the value of the ".posted_comment_id" class and then how do I load the data which is returned into the ".commentView" class?

jQuery/AJAX:

$(".closedComment").click(function(){
    var $this = $(this);
    $this.hide().siblings('.openComment').show();
    $this.siblings().next(".commentBox").slideToggle(); 

        $.ajax({
         type: "POST",
         url: "http://example.dev/comments/get_timeline_comments", 
         data: {post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").val()},
         dataType: "text",  
         cache:false,
         success: 
              function(data){
                $this.closest(".commentView").load(data);
              }
         });

    return false;
});

HTML:

<div class="interactContainer">
    <div class="closedComment" style="display: none;">
        <a href="#" class="floatLeft rightMrgn">open comments</a>
    </div>
    <div class="openComment" style="display: block;">
        <a href="#" class="floatLeft rightMrgn">close comments</a>
    </div>
    <div class="commentBox floatLeft" style="display: block;">
        <form action="http://example.com/comments/post_comment" method="post" accept-charset="utf-8">
          <textarea name="comment" class="inputField"></textarea>
          <input type="hidden" name="post" value="13">
          <input type="hidden" name="from" value="5">             
          <input type="hidden" name="to" value="3"> 
          <input type="submit" name="submit" class="submitButton">
        </form> 
          <div class="commentView"></div>   
          <div class="posted_comment_id" style="display:none;">13</div>  
    </div>
</div>

Answer 1

Replace .val by .html or .text. This will return the innerHTML of the element.

data: {
    post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").text()
}

You might need to convert the string to an integer to make it work.

If the query selector fails, this selector might do the job instead:

$this.parent().find(".posted_comment_id")

---

To add the returned data on your webpage, use the success handler. Here's an example of how it's done:

success: function(json) {
        // Parse your data here. I don't know what you get back, I assume JSON
        var data = JSON.parse(json),
            content = data.whatever_you_want_to_print;

        // Assuming your selector works, you put in in the element using .html
        $this.closest(".commentView").html(content);
    }
});

Answer 2

You probably want to do something like:

$(this).parents('.interactContainer').find(".posted_comment_id").text()