Get the Clicked Item TextBox Displayed in Repeater Control ASP.Net

Question

I need to implement discussion forum,so I am currently using asp.net repeater control. I have a textbox for adding a reply for each repeater item. Currently I am using a java script and styles for it.

On first load the reply panel would not be visible and if clicked the rely link button it should display only the clicked item textbox panel. Currently it is showing only the first item of repeater even any reply button clicked?

Any thing wrong on this or how I get the exact item ID I clicked in repeater?

    <div id="ViewDiscussion_Panel" runat="server" style="width: 100%; float: left;">
            <asp:Repeater ID="rptDiscussionFolders" runat="server" OnItemCommand="rptDiscussionFolders_ItemCommand" >
   <ItemTemplate>

     <div id="ContentArea" style="float: left; width: 92%; min-height: 80px; height: auto; margin-left: 10px; margin-bottom: 10px;"> 

        <div id="EditReplyItemArea" class="EditReplyItemArea" runat="server" style="margin: 15px 10px 10px 0px">
                                    <asp:TextBox ID="txtCommentItemReply" runat="server" Style="width: 98.8%; height: 1.5em; border: 1px solid gray" title="Add a reply" data-bind="value: text1, valueUpdate: 'keyup'"></asp:TextBox>
                                    <div style="float: right;">
                                        <asp:Button ID="ItemReplySubmit" data-bind="enable: isFormValid" runat="server" Text="Reply" OnClick="ItemReplySubmit_Click" CommandArgument='<%# Eval("ParentFolderID")%>' BackColor="DarkBlue" ForeColor="White" />
                                    </div>
                                     <div style="float: right;">
                                        <asp:Button ID="ItemReplyEdit" data-bind="enable: isFormValid" runat="server" Text="Edit" OnClick="ItemReplyEdit_Click" CommandArgument='<%# Eval("ListID")%>' BackColor="DarkBlue" ForeColor="White" />
                                    </div>
                                </div>

    </div>

 </ItemTemplate>
            </asp:Repeater>
        </div>

Script...

 function EnbaleReplyPanel() {
        $("#ContentArea").addClass("showDivs");
        return false;
    }

Style...

<style type="text/css">
#ContentArea .EditReplyItemArea
{
    display: none;
}
#ContentArea.showDivs .EditReplyItemArea
{
    display: block;
}
</style>

Sufyan Jabr · Accepted Answer · 2016-05-08T10:46:01.117

1

Basically you need to pass an index to the function, and also give your div a unique ID based on that index values...

so the changes will be as below:

Div unique name:

 <div class="CArea" id="ContentArea_<%# Container.ItemIndex + 1 %>" style="float: left;


function EnbaleReplyPanel(indx) {
    $("#ContentArea_" + indx).toggleClass("showDivs");
    return false;
}

Am not sure where are you calling EnbaleReplyPanel from, but you need to pass the same thing from there, so it will be:

EnbaleReplyPanel(<%# Container.ItemIndex + 1 %>);

For the css class names, will be:

<style type="text/css">
.CArea .EditReplyItemArea
{
display: none;
}
.CArea .showDivs .EditReplyItemArea
{
    display: block;
}
</style>

edited May 08 '16 at 10:46

answered May 08 '16 at 09:35

Sufyan Jabr

791
4
20

So how about the css ID should be then? – KIS May 08 '16 at 10:20
You don't need the css classes at all, – Sufyan Jabr May 08 '16 at 10:33
No I mean #ContentArea .EditReplyItemArea – KIS May 08 '16 at 10:34
instead of # in the class name use a normal name, like x `.CArea .EditReplyItemArea { display: none; } .CArea .showDivs .EditReplyItemArea { display: block; }` instead of `.addClass("showDivs")` use `toggleClass("showDivs")` – Sufyan Jabr May 08 '16 at 10:37
Can you add me a sample using toggleClass? – KIS May 08 '16 at 10:43
Yes that thing working,but now I want to hide all other opened reply textboxes when click one reply,means that only one reply box at a time. – KIS May 08 '16 at 14:51
Since you gave the all div's the css class .CArea ... you can do this: `$(".CArea").removeClass("showDivs");` `$("#ContentArea_" + indx).addClass("showDivs");` //or `$("#ContentArea_" + indx).toggleClass("showDivs");` – Sufyan Jabr May 09 '16 at 03:42

Get the Clicked Item TextBox Displayed in Repeater Control ASP.Net

1 Answers1