How to Trigger a Javascript Function from an OnItemClick Event in ASP.NET ListView

In order to achieve the functionality of refreshing ListView No.2 without refreshing the entire page when a user clicks on an item in ListView No.1, I am attempting to use JavaScript. Here is what I have tried so far:

ListView No.1:

<asp:ListView ID="LeftsideMessageList" runat="server" ItemPlaceholderID="itemPlaceHolder1"  DataKeyNames="id" OnSelectedIndexChanged="LeftsideMessageList_SelectedIndexChanged"  >

ListView No.2 (which refreshes every time any item in ListView No.1 is clicked/selected)

<asp:UpdatePanel ID="videosUpdatePanel" runat="server" OnLoad="videosUpdatePanel_Load" > 
        <ContentTemplate>
             <asp:ListView ID="videosListView"  runat="server" ItemPlaceholderID="itemPlaceHolder1">
            //List view items and stuff
         </ContentTemplate>
</asp:UpdatePanel>

Here is the JavaScript code I am using:

<script
        type="text/javascript"> function GetVideos() { __doPostBack("<%=videosUpdatePanel.UniqueID %>", ""); } 
    </script>

To trigger the OnLoad method of the videosUpdatePanel from the GetVideos() JavaScript function, I have the following code:

protected void videosUpdatePanel_Load(object sender, EventArgs e)
{
        string email = Session["Username"].ToString();
        List<Activity> videos = BC.getMediaOfUser(email, "Video");

        videosListView.DataSource = videos;
        videosListView.DataBind();
}

The desired procedure is as follows:

Click/Select any item from ListView No.1 -> Call the GetVideos() JavaScript -> Call Update panel's OnLoad to refresh ListView No.2

The challenge I am facing is figuring out how to invoke the GetVideos() function as ASP ListViews do not have an OnClick method. What is the appropriate method to trigger ListView No.1's OnItemClick?

Answer №2

Inspect the LeftsideMessageList listviews for rendering HTML content. Implement a click event binding to each row item. This event should trigger the execution of the GetVideos function.

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

Struggling to set up a mail delivery service due to unexpected error messages

I recently developed a mail sending service but encountered an issue: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Mail; using System.Web; using System.Web.Script.Serialization; using System.Web.Ser ...

What is the best way to create a generic script for executing AJAX requests with

When using jQuery Ajax for GET and POST requests, the code typically looks like this: $(document).ready(function () { $.ajax({ type: "POST", url: "MyPage.aspx/ProcessInfo", data: JSON.stringify(DTO), contentType: "appl ...

React app's compilation is failing due to non-compliant ES5 code generation of the abab module, resulting in errors on IE

Can anyone explain why a create-react-app project using TypeScript and configured to generate ES5 code is not functioning on IE11 due to the "atob" function from the 'abab' package not being compiled into ES5 compliant code? module.exports = { ...

Dealing with numerous https requests within a node.js application

I've been searching around on SO for assistance with this issue, but I seem to be going in circles without making any progress. My current project involves making multiple ReST POST requests using node.js https. I need to keep track of the responses ...

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

Maintain checkbox selection even after leaving the page

I am looking for a way to maintain the state of a checkbox even after navigating away from the page in an AngularJS and bootstrap environment. Currently, I find that my bound variable gets reset to false every time I reload the page when the controller run ...

What is the best way to populate an array when I'm uncertain about the type of items it will

When I am given an instance of a class that implements an interface, the exact type may not be known. To create an array of this class, regardless of its specific type, I can use the following approach: IWhatever[] ArrayOfClass = (IWhatever[])Array.Create ...

Discovering the magic of toggling multiple hide/show effects on click in Bootstrap 4

I have successfully implemented Hide and Show effects through the on-click event. $(document).ready(function () { // hiding clear button initially $(".clearfiltershow .clearFiltersBtn").css('visibility', 'hidden') ...

Eliminate Elements from Array - Angular Four

I am currently developing a basic to-do app using Angular4. The setup of the app is structured as follows: Form Component: Responsible for adding items to the to-do list Item Component: Represents individual to-do items App Component: Contains a *ngFo ...

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

What is the most efficient method for storing and retrieving numerous DOM elements as JSON using the FileSystem (fs) Module in Node.js?

Is there a way to efficiently save dynamically added DOM elements, such as draggable DIVs, to a file and then reload them later on? I am looking for the most organized approach to achieve this. ...

the lifespan of object creation with StructureMap ObjectFactory

For the past few months, I have been relying on StructureMap for my projects. Whenever I need to fetch the correct instance of an object, I always turn to ObjectFactory.GetInstance. Now, I am curious to know what the default InstanceScope of ObjectFactory ...

The function $scope.removeNinja cannot be found

As a beginner in Angular, I encountered an issue while working on a project that involved creating a Directory of ninjas with various functionalities implemented using Angular. Here is a snippet of my HTML file: <!DOCTYPE html> <html lang="en" n ...

Create a Polygon with Holes using a set of polygon shapes

When working with polygons, it's important to note that the points are given in a specific orientation - counter clockwise for polygons and clock wise for holes. So how can we construct polygons with holes using a list of these shapes? Let's est ...

The reason behind the creation of .pnp.loader.mjs and .pnp.cjs files by yarn

While working on my React project with Vite, I noticed that when using yarn to start the "live server," two new files are created: .pnp.loader.mjs and .pnp.cjs. Can anyone explain what these files are for? I've never come across them before as I usual ...

Convert JavaScript to TypeScript by combining prototype-based objects with class-based objects

My current challenge involves integrating JavaScript prototype with class-based programming. Here is an example of what I've tried: function Cat(name) { this.name = name; } Cat.prototype.purr = function(){ console.log(`${this.name} purr`) ...

Extract the String data from a JSON file

valeurs_d = ""; for (var i = 0; i < keys.length -1 ; i++) valeurs_d += + event[keys[i]] + ", "; var str5 = ","; var str6 = str5.concat(valeurs_d); var valeurs = str6.sub ...

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

What is the best way to display or conceal buttons when the textarea is in focus or out of focus, while still allowing them

Seeking help to include two buttons beneath the input box. One button is for saving the input in the textarea, while the other is for aborting. The buttons should only be visible when the input field is focused. An issue I am facing is that clicking on ...

Initiating the onclick event for Input/Form

<form method="POST" onsubmit="return false;"> ... <input type="submit" name="button" value="Login" onclick="require('file.js').submitForm(this.form);"> ... </form> Is there a way to trigger the onclick event of this INPUT eleme ...