Question

So I have the following Javascript. I will try and figure out why the text specified inside the CommentItem div I am appending isn’t showing.. But my main issue is targetting ContainerPh the one thats above the txtComment that initiated everything…

   $('.txtComment').live("keypress", function (event) {
$_this = $(this);

var Id = $(this).attr("index");
var d = JSON.stringify({ "Value": $(this).val(), "StreamId": Id })
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: '../API/Services.asmx/PostComment',
        data: d,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: PostOk,
        error: errFunc
    });
    $('.txtComment').each(function () {
        $(this).attr('disabled', 'disabled');
    });
}

});

function PostOk(result, userContext, methodName) {

var CommentsPh = $_this.parent().parent().find(".CommentsPh");
 var CommentItem =
    "<div class='CommentItem'>" +
        "<div id='CommentImgContainer'>" +
        "<img src='' class='CommentImg'  + '.thumb' />"   
        "</div>" +
        "<div id='CommentStory'>" +
            "<a href='' class='BuddyTag small'></a>" +
            "<span class='CommentValue'>" + result.d[1] + "</span>" +
            "<br />" +
            "<div class='spacer'></div>" +
            "<span class='DateTime'>datetime</span>"
            "<span style='float: right; margin-right: 7px; margin-left:8px; line-height:8pt;'>.</span>" +
            "<span class='CommentUp'>sometext</span>" +
            "<span class='CommentLike'></span>" +
        "</div>" +
    "</div>";

    $(CommentsPh).append(CommentItem);

$('.txtComment').each(function () {
    $(this).removeAttr('disabled');
    });
}

This is populating all .CommentsPh even tho I am trying to get the one right before the txtComment Textbox. What am I doing wrong?

                                <asp:Button ID="btnDeleteStream" CssClass="DisposeOfStream" OnClick="btnDeleteStream_Click"
                                    runat="server" />
                            </div>
                        </asp:Panel>





                                <div class="CommentsPh">
                                </div>
                                <asp:Button ID="btnDeleteStream" CssClass="DisposeOfStream" OnClick="btnDeleteStream_Click"
                                    runat="server" />
                            </div>
                        </asp:Panel>

                        <asp:Panel ID="CommentTools" CssClass="CommentTools" runat="server">
                            <asp:TextBox ID="txtComment" TextMode="SingleLine" CssClass="txtComment" runat="server"></asp:TextBox>

Ideas? Thanks.

Answer 1

We can’t see much of the markup, so it’s hard to tell that two parents above that TextBox there are not multiple .CommensPh divs (which #find would match against).

As an alternative, is there any reason to not put an id= attribute on the desired div tag, using some convention that ties the TextBox to that div? I’m thinking something like…

<div id='comments_txtComment'></div>

… where the TextBox in question is…

<asp:TextBox ID='txtComment'>

…and then in PostOK, do something like var CommentsPh = $(‘comments_’+$_this.attr(‘id’));