Expanding accordion functionality and implementing JavaScript events within a content template

Delving quickly into the code, below you will find the asp.net markup for an accordion that serves as a container for topic headlines as headers for each panel. The contents of these panels 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>

Additionally, here is the javascript event that I have linked to the list items displaying the comments to be moderated. However, only the mouseover and mouseout events seem to work while click events do not function anymore.

//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);
}

Despite seeing the list of events in Firebug, they simply don't fire. What could be the issue?

Answer №1

The reason for this issue was because Accordian had blocked the event from happening by using event.preventDefault when the method occurred. I resolved it by switching to a repeater control.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an axios URL using Vue data results in receiving the value of undefined

I'm currently experimenting with axios to retrieve data from openweathermap. I've been working on constructing the URL by utilizing various methods to extract latitude and longitude from the user's browser, followed by a function call to pie ...

What is the process of creating a color range in Java?

I am looking for a way to input a 6-digit RGB-hex number and then be able to click on a button that will display the corresponding color name. Unfortunately, I have not been able to find a color library in Java that can provide me with the names of arbitra ...

Turn off Node.js Caching for Good

My Node.js website seems to be stuck using a cached version even after updating the code and using the -w option. I need to figure out how to disable caching with Forever in Node.js and completely uninstall it. I found this answer that confirms it caches: ...

Encountering an issue while attempting to utilize the .find() method in Mongoose

Currently, I am in the process of setting up a database using MongoDB and integrating the Mongoose ODM with Node.js. After running the code multiple times without any issues, I encountered an unexpected error when adding the last block to utilize the .find ...

"Unlocking the Power of Material UI withStyles() in React JS: Mixing and Matching Styles for Stunning

I am working with the following code snippets: const styles = theme => ({root: {backgroundColor: '#000000'}) const styles2 = theme => ({root: {backgroundColor: '#fff'}) In my React component, I am using export default compose( ...

Identify when a mouse hovers within 10 pixels of a div using jQuery

Is it possible to detect when a user hovers over a specific area within a div using JavaScript or jQuery, without adding any additional tags? -------------------------------- -------------------------------- -------------------------------- -------- ...

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

Determining the percentage between two elements using Bootstrap 4's range slider

I've been searching everywhere but haven't found a solution. I am trying to implement Bootstrap 4.5's range slider to distribute the % difference between Client and Company, ranging from 1% to 100%. However, I am struggling with the jquery/j ...

Employing AJAX, execute a synchronous function asynchronously (Javascript)

Here's a code snippet for the sync function. I've been calling it inside an Ajax, but apparently it's deprecated because it's synchronous. Is there any way to make it run as if it were asynchronous? Or is there a way to convert it into ...

Prevent scrolling/touchmove events on mobile Safari under certain conditions

iOS 5 now supports native overflow: scroll functionality. I am trying to implement a feature where the touchmove event is disabled for elements that do not have the 'scrollable' class or their children. However, I am having trouble implementing ...

Randomly injecting strings like 'jQuery111201xxx' into a string using jQuery Ajax

After implementing a booking system that utilizes FullCalendar, I encountered an unusual issue with the 'notes' field. Occasionally, a strange string is inserted into the notes field at random points. Here's an example of what I found recent ...

Toggle Jquery feature will dynamically add the "required" attribute to the input field when the specified div is visible, and it will automatically remove the attribute when the div

I am new to using jQuery and I am facing an issue with my code. I want to make a checkbox act as a toggle with jQuery. When the checkbox is clicked and the toggle displays the div, I want to add the required attribute to the checkbox input. Similarly, when ...

Generating a JSON file by combining data from two separate lists in order to render a visually appealing stacked bar chart

Combining two lists to create a JSON for generating a stacked bar chart using JavaScript list1 = ['2019-03-05', '2019-02-20', '2019-02-20', '2019-02-19', '2019-02-18', '2019-02-16', '2019-02 ...

Redux does not have the capability to insert an object into an array

I'm currently learning about redux and I've encountered an issue trying to add multiple objects into the initialState array. I attempted using the push() method, but it isn't working as expected. The submitter value is being passed to my act ...

What is the best way to make objects stand out in a scene during a Maya event of a change?

Currently, I am utilizing Maya2014 along with pyqt4.8 and python2.7. I am in the process of developing an application that aims to streamline and expedite the selection of items within Maya. This selector tool will allow users to easily attach objects in ...

What is the best approach for managing multiple HTTP requests in my specific situation?

I have a query about handling multiple HTTP requests in my code to ultimately get the desired result. Here is an outline of my approach: var customer[]; var url = '/api/project/getCustomer'; getProject(url) .then(function(data){ ...

Auth0 encountering issues retrieving ID token and user metadata

Currently in the process of integrating Auth0 into a Vue.js/Node.js application, I have successfully enabled user registration and login functionality (to /callback). Although the manual addition of data to the user metadata section is functional at this s ...

What is the best way to detect and handle the destroy event in Kendo UI grids when a click event

How can I trigger a function when the delete button in a grid is clicked using JavaScript? ...

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

Within my ts file, I'm using the code snippet below: $('input[type=hidden]').attr("disabled", false); The code functions as intended, however, an error persists: Argument of type 'false' is not assignable to parameter of typ ...

Incorporating a background image into a card component using props

I attempted to add a background image to the card component through props, but the image failed to display on the card. I didn't encounter any errors, and I'm unsure what mistake I might be making. Any suggestions or alternative solutions would b ...