Question

Quickly getting into the code, below is asp.net markup for the accordian which hosts the topic headline as header for each pane and contents of which are comments to be moderated.

 <ajaxToolkit:Accordion runat="server" id="accCommentTrash" fadetransitions="true"
                                    selectedindex="-1" requireopenedpane="false" autosize="None" headercssclass="accTitle"
                                    headerselectedcssclass="accSelectedTitle">
                                    <HeaderTemplate>
                                        <h4>
                                            Title:(<%# ((System.Data.DataRowView)Container.DataItem)["Title"]%>)</h4>
                                    </HeaderTemplate>
                                    <ContentTemplate>
                                        <asp:Repeater runat="server" id="rptrComments" datasource='<%# ((System.Data.DataRowView)Container.DataItem).CreateChildView("CommentRelation") %>'>
                                            <HeaderTemplate>
                                                <ul class="comment_trash">
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <li id='<%#  new Utilities().encrypt(((System.Data.DataRowView)Container.DataItem)["CommentId"].ToString()) %>'
                                                    name='<%# new Utilities().encrypt(((System.Data.DataRowView)Container.DataItem)["CommentId"].ToString()) %>'>
                                                    <asp:Label id="lblCommentor" runat="server" text='<%# ((System.Data.DataRowView)Container.DataItem)["AuthorName"] %>'
                                                        cssclass=""></asp:Label>
                                                    <span>Commented on </span><a href='?id=<%# new Utilities().encrypt(((System.Data.DataRowView)Container.DataItem)["BoardId"].ToString())%>'
                                                        title="Click to view board" class="">
                                                        <%# ((System.Data.DataRowView)Container.DataItem)["Title"] %>
                                                    </a>
                                                    <p>
                                                        <asp:Label runat="server" id="lblComment" text='<%# ((System.Data.DataRowView)Container.DataItem)["Comment"] %>'
                                                            cssclass=""></asp:Label>
                                                    </p>
                                                    <p>
                                                        Trashed about
                                                        <%# GetTimeSpan(DateTime.Now,((System.Data.DataRowView)Container.DataItem)["ModifiedOn"].ToString()) %>
                                                        hours ago, Commented on
                                                        <%# DateTime.Parse(((System.Data.DataRowView)Container.DataItem)["CreatedOn"].ToString()).ToLongDateString() %>
                                                    </p>
                                                </li>
                                            </ItemTemplate>
                                            <FooterTemplate>
                                                </ul>
                                            </FooterTemplate>
                                        </asp:Repeater>
                                    </ContentTemplate>
                                </ajaxToolkit:Accordion>

and below is the javascript event that i attach to the list items that show the comments to be moderated. Just that click events on them don’t work anymore just the mouseover and mouseout.

   //comment restore
        if ($get("<%= accCommentTrash.ClientID%>")) {
            var li = $get("<%= accCommentTrash.ClientID%>").getElementsByTagName("li");
            console.log(li);
            for (iloopCounter = 0; iloopCounter < li.length; iloopCounter++) {
                $addHandlers(li[iloopCounter], {
                    mouseover: ul_li_hover,
                    mouseout: ul_li_hover
                });
                $addHandler(li[iloopCounter],"click",restoreComment);
            }
        }

below is the restore comment function,

function restoreComment(evnt){
console.log(this.name);
console.log(this.id);
}

Now what am i doing wrong, here . Firebug shows me the list of events but the events don’t fire 🙁

Answer 1

This was due to the Fact that Accordian had prevented the event from occurring by calling event.preventDefault when method occured. I changed the control to repeater and solved it