Javascript only working on first listview item

Question

I have a listview with some info on gigs. When you hover an item, a JavaScript function (from hoveralls) is called to show the details in a separate div on the page. Problem is that it only works on the first item of the listview. I tried putting the function in de window.load and in the document.ready but no luck.

Why is this function not working on all the items in the list?

<asp:ListView ID="lvAgenda" runat="server" GroupItemCount="4">
    <EmptyDataTemplate>
        <table style="">
            <tr>
                <td>
                    <p class="p2">
                        <asp:Label ID="lblNoGigs" runat="server" Text="Sorry, maar er zijn geen optredens gepland :-(."></asp:Label>
                    </p>
                </td>
            </tr>
        </table>
    </EmptyDataTemplate>
    <ItemTemplate>
        <td>

            <div id="divGigItem" class="gigitem img-bottom-shadow">
                   <div id="gigItemTest">
                    <div class="hiddengigitem">
                        <asp:Label ID="lblGigId" runat="server" Visible="false" Text='<%# Eval("GigID") %>' CssClass="gigitemyear"></asp:Label></div>
                    <div class="gigitemyear">
                        <asp:Label ID="lblGigMonth" runat="server" Text='<%# Eval("GigDate.Year") %>' CssClass="gigitemyear"></asp:Label></div>
                    <asp:Label ID="lblGigDay" runat="server" Text='<%# Eval("GigDate", "{0:dd/M}") %>' CssClass="gigitemdate"></asp:Label>
                    <div class="gigitemplace">
                        <p class="hoveralls_text">
                            <asp:Label ID="lblGigPlace" runat="server" Text='<%# Eval("GigCity") %>' CssClass="gigitemplace"></asp:Label></p>
                    </div>
                 </div>
            </div>
        </td>
    </ItemTemplate>
    <LayoutTemplate>
        <table id="lvTable" runat="server" border="0" style="">
            <tr id="groupPlaceholder" runat="server">
            </tr>
        </table>
        <div class="wrapper aligncenter margin-top">
            <asp:DataPager ID="dpFutureGigs" PagedControlID="lvAgenda" PageSize="12" runat="server">
                <Fields>
                    <asp:NextPreviousPagerField ButtonType="Image" ShowPreviousPageButton="true" ShowLastPageButton="True"
                        ShowFirstPageButton="True" ButtonCssClass="img-max-width50" FirstPageImageUrl="images/Icons/firstpage.png"
                        LastPageImageUrl="images/Icons/lastPage.png" NextPageImageUrl="images/Icons/nextPage.png" PreviousPageImageUrl="images/Icons/previousPage.png" />
                    <asp:NumericPagerField ButtonCount="2" />
                </Fields>
            </asp:DataPager>
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <tr id="tableRow" runat="server">
            <td id="itemPlaceholder" runat="server">
            </td>
        </tr>
    </GroupTemplate>
</asp:ListView>

And here's the javascript, that works fine on the firts element...

<script type="text/javascript">

    $(document).ready(function () {
        $('#divGigItem').HoverAlls({
            speed_in: 500,
            bg_width: '380px',
            bg_height: '340px',
            starts: '-380px,340px',
            ends: '0px,0px',
            returns: '-380px,340px',
            target_container: "#gigDetailsTarget",
            html_mode: "#gigDetails",
            container_class: 'leftslidein',
            bg_class: 'gigdetailbg'
        });


    });

</script>

This is ASP.net, not classic

John
– John

2013-07-22 13:31:26 +00:00
Commented Jul 22, 2013 at 13:31 — John
– John, Commented Jul 22, 2013 at 13:31

David Hedlund · Accepted Answer · 2013-07-22 11:54:14Z

1

You're trying to access several elements by a single ID, but an ID has to be unique within the document. Access the elements by a class that uniquely identifies the elements of interest instead, or by some other CSS selector.

Reusing ID's the way you'll end up doing if you have hard-coded ID's in item templates will cause invalid HTML and $('#X') will only ever return one element, regardless of how many elements of id="X" there may be in the document.

answered Jul 22, 2013 at 11:54

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bongo Over a year ago

I understand what you say, but is there a way to get this behaviour on all the items because I cannot predict how many items their will be, but the behavior should always be the same...

David Hedlund Over a year ago

@Bongo: Yes, there is a way! Instead of accessing the elements by ID, access them by some class name, eg. $('.gigitem').HoverAlls(...), if gigitem is unique to the elements you're interested in.

Bongo Over a year ago

Thx, simple but effective.

Collectives™ on Stack Overflow

Javascript only working on first listview item

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related