CODEWITHSUNDEEP
javascriptasp.net
Chrislaar123
Chrislaar123

Reputation: 321

Calling a div class that's set by code behind function in jquery

I have two divs that sit inside a repeater. Basically the div's class names gets set based on what ever my code behind functions return. However, I want to be able reference these divs within my javascript which i'm unsure on how to do. 

 <asp:Repeater ID="rptdivisions" runat="server">
                    <ItemTemplate>
                        <div class='<%# getDivHeaderClass(Eval("Division").ToString())%>'>
                           <%# Eval("Division")%>
                        </div>
                        <div class='<%# getDivMainClass(Eval("Division").ToString())%>'>
                            <br />
                            <dx:ASPxGridView ID="gvrecords" runat="server" ClientInstanceName="gvCentral" AutoGenerateColumns="False" OnHtmlDataCellPrepared="gvrecords_HtmlDataCellPrepared">
                                <Columns>
                                    <dx:GridViewDataTextColumn Caption="Product Code " VisibleIndex="0" FieldName="code"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Description" VisibleIndex="1" FieldName="description"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Packsize" VisibleIndex="2" FieldName="packSize"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Barcode" VisibleIndex="3" FieldName="barcodeUnit"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Expiry Date" VisibleIndex="4" FieldName="ExpiryDate"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Quantity" VisibleIndex="5" FieldName="packQuantity"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Zone ID" VisibleIndex="6" FieldName="ZoneID"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Location ID" VisibleIndex="7" FieldName="LocationID"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Date Recorded" VisibleIndex="8" FieldName="DateRecorded"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Average WK Sales" VisibleIndex="9" FieldName="AverageWkSales"></dx:GridViewDataTextColumn>
                                </Columns>
                                <ClientSideEvents EndCallback="function(s, e){Dcs.load()}" />
                                <SettingsText Title="Central" />
                            </dx:ASPxGridView>
                        </div>
                        <br />
                    </ItemTemplate>
                </asp:Repeater>

Javascript is:

    $(function () {
        $(document).on('click', '.headerdiv', function () {
            $(".maindiv").toggle("slow");
        });
    });

Upvotes: 0

Views: 179

Answers (2)

Ricketts
Ricketts

Reputation: 5213

Add an additional class to the div and reference that.

Here is a sample: (the spaces after the class name is important)

<div class='<%# "header_class " + getDivHeaderClass(Eval("Division").ToString())%>'>
    <%# Eval("Division")%>
</div>
<div class='<%# "main_class " + getDivMainClass(Eval("Division").ToString())%>'>

Then in your js:

$(function () {
    $(document).on('click', '.header_class', function () {
        $(this).siblings('.main_class').toggle('slow');
    });
});

EDIT:

As the OP commented, this only works if each item in the template is surrounded by a div. If you do not have a div wrapping each item, the following code will work for you:

$(function () {
    $(document).on('click', '.header_class', function () {
        $(this).nextAll('.main_class').first().toggle('slow');
    });
});

Note: I used $(this).nextAll('.main_class').first().toggle('slow'); as it would be more reliable to the general user. If your divs are always beside each other and no elements in between, you could simply use $(this).next().toggle('slow');. If you use the shorter version and end up changing your layout later, it will break.

Upvotes: 1

thllbrg
thllbrg

Reputation: 2007

You need to invoke your function 

$(function () {
    $(document).on('click', '.headerdiv', function () {
        $(".maindiv").toggle("slow");
    });
})();

Upvotes: 0

Related Questions