CODEWITHSUNDEEP
javascriptjquery
user474901
user474901

Reputation:

hide/show multiple button in repeater?

I have hiden delete buttons"imgbtnDeleteGroups" to delete item in the repeater but my problem my "btnDeleteGroups" is not showing the imgbtnDeleteGroups

<div class="Group">
    <div class="row-fluid">
            <h3 class="font-black">Groups</h3>

    </div>
    <div class="row-fluid bottom clearfix group-div">
        <asp:LinkButton ID="lnkBtnAllGroup" runat="server" OnClick="lnkBtnAllGroup_Click"
        CssClass="btn lts-darkgray">All</asp:LinkButton>
        <asp:Repeater ID="rptGroup" runat="server" OnItemCommand="rptGroup_ItemCommand">
            <ItemTemplate>
                <div class="GroupLink btn lts-blue">
                    <asp:HiddenField ID="hfGroupID" runat="server" Value='<%#  Eval("GroupID") %>'
                    />
                    <asp:LinkButton ID="GroupBTN" runat="server" OnClick="LinkButton1_Click">
                        <%# Eval( "name") %>
                    </asp:LinkButton>
                </div>
                <asp:ImageButton ID="imgbtnDeleteGroups" CssClass="btnDelete hideDeleteBtn"
                runat="server" CommandName="deleteGroup" ImageUrl="~/DesktopModules/ResourceGrouping/img/off.png"
                ClientIDMode="Static" />
            </ItemTemplate>
        </asp:Repeater>
        <div class="groupName">
            <asp:TextBox ID="txtbGroupName" runat="server" placeholder="New Group"></asp:TextBox>
            <asp:Button ID="btnCreateGroup" runat="server" Text="Create Group"
            OnClick="btnCreateGroup_Click" UseSubmitBehavior="false" CssClass="btn lts-green group-dropdown"
            />
            <input id="btnDeleteGroups" type="button" name="" value="Delete Group"
            />
        </div>
        <div class="divbreak">
            <img src="/DesktopModules/ResourceGrouping/img/divbreak-white.png" />
        </div>
    </div>
</div>

Javascript: 

  $("#btnDeleteGroups").click(function () {

      //alert("sdvsd");
      $("#Group").find(".btnDelete").removeClass("hideDeleteBtn");

  });

Upvotes: 0

Views: 1189

Answers (3)

vdubus
vdubus

Reputation: 456

In your HTML code, I see <div class="Group">, so "Group"is a CSS class and not an HTML ID.
So you should write $("div.Group .btnDelete").removeClass("hideDeleteBtn");.
Note that you can fuse find(".btnDelete") to your jQuery selector.

Upvotes: 0

Jon Harding
Jon Harding

Reputation: 4946

First of all there is no need to reference .Group at all unless it is only specific to that portion of the webpage.

If you would like to find them all you should make use of the .each() function. Here is a simplified example.

$(document).ready(function() {  
    $('#btnDeleteGroups').click(function() {  
        $('.btnDelete').each(function() {
            $(this).removeClass("hideDeleteBtn");
        });
    });
});

Here is a jsfiddle to show what needs to happen.

Upvotes: 1

thedevlpr
thedevlpr

Reputation: 1101

Since you are using a repeater I would assume it appends the repeater name to the controls and since you will have multiple instances of that control you need to specify which one you are referring to. So something along the lines of 

$("#btnDeleteGroups").click(function(){
    $("#rptGroup_imgbtnDeleteGroups_" + position).removeClass("hideDeleteBtn");
});

would specify that the imgbtndeletegroups that belongs to a certain row was pressed and you want to remove the class from that specific control.

Upvotes: 0

Related Questions