The functionality of the Javascript code suddenly ceased to operate within an ASP.NET user control that had an Update

Recently, I encountered an issue with a JavaScript code designed to enable full gridview row clicking to check a checkbox within the same row. This code is located in an external file.

  $(document).ready(function () {
                $('tr.dataRow').on('click', function () {
                    var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
                    $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

                });
        });

        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            $('tr.dataRow').on('click', function () {
                var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
                $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

            });
        });

Within the User Control code behind, you can find:

  protected void grdBusiness_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "dataRow";
        }
    }

This script is enclosed in an Update Panel to prevent full Postback. Its purpose is to allow for multiple selection of items within a gridview. Despite its initial success, when integrating the User Control into a parent page with its own Update Panel, issues arose.

While utilizing the gridview row clicking feature and subsequently attempting to click another button outside of the user control for processing, the checkbox clicking functionality ceased to work. The JavaScript code appeared to stop functioning altogether.

I conducted an experiment by removing the UpdatePanel from the parent page, which temporarily resolved the issue. However, the ultimate goal was to have Update Panels implemented in both the User Control and the Parent page simultaneously.

Answer №1

To handle events in jQuery 1.7 and above, you can use the .on() method to attach an event handler to a parent element. Simply include the desired selector with 'dataRow' as an argument.

For more information, visit http://api.jquery.com/on/

Instead of...

$('tr.dataRow').click( function() {
    // do something
});

You can now use...

$('body').on('click', 'tr.dataRow', function() {
    // do something
});

You don't have to restrict this code within $(document).ready(function () {. It works outside too.
If you are using an older version of jQuery, you can utilize the .live() method.

For further insights, check out Event binding on dynamically created elements?

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

What is the reason behind the decision to use int instead of uint for size-related members in C# containers and GUI classes?

Typically, I work with C++ for programming, but for a school project, I had to switch over to C#. As I started coding in C#, following my usual C++ patterns, I was taken aback when the compiler flagged issues like the one below: const uint size = ...

Is it possible to combine and compress HTML/CSS/JS files using npm?

When organizing my CSS code and directory folders, I like to use multiple stylesheets to keep things tidy. However, it appears that @import is not recommended in CSS. Instead, combining your code (as @import does) and minifying it by removing comments, spa ...

Efficiently handling and sifting through vast amounts of numeric data in JavaScript

I am working with a collection of RGB value integers ranging from 0 to 255, organized into eight separate lists. For example, one list contains 8,349,042 values, equivalent to 2,783,014 RGB sets of three. The main goal is for the user to select a pixel in ...

Your request was denied by the Google Maps API server due to an invalid request. Please include the 'size' parameter in your request

I need to incorporate a static Google Map into my application built on node.js. Here is the code snippet: .panel.panel-primary .panel-heading h2.panel-title On the map .panel-body img.img-responsive.img-rounded(src="http://maps.googl ...

The array position with the index of "0" will be accessed after using JSON.parse

I need help parsing this type of data: { "roads": [{ "road": "*IndustrialArea1", "house_number_required": true }, { "road": "Turnoff Kienbaum", "house_number_required": true }, { "road": "Maple Avenue (Eggersdorf)", "house_numb ...

Utilizing ADO.Net for concurrent access to MySQL databases with multi-threaded functionality

In the process of developing my ASP.Net web application, I am incorporating MySQL with the help of the MySQL-Provided Connector/NET, an ADO.NET-compatible interface. Given that ASP.Net handles concurrent requests using separate threads, it is imperative fo ...

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

The parental context is not bound to the isolated scope of the custom directive

Below is the custom directive implemented: (function() { angular.module('commentsDirective', []) .directive('mngComments', mngComments) function mngComments() { return { restrict: 'AE', ...

Show me a list of either only development or production dependencies in npm

When attempting to list only the production dependencies from package.json according to the npm docs, I tried: npm list -depth 0 -prod or npm list -depth 0 -only prod However, npm continues to list both dependencies and devDependencies. Can anyone sugg ...

Obtain data from a dynamic website using AJAX (XMLHttpRequest) in C#

I am working on developing a C# application to retrieve my data cap details from my ISP's website. The specific page I am refering to can be found here, however, I suspect that it may only be accessible within their network. If you require more inform ...

Is there a way to determine the items that will be displayed on this page by clicking a link from a different page?

First Page: Whenever a link is clicked, it will redirect to the second page where only the relevant item will be displayed <ul class="portfolio-filters list-inline"> <li ><a href="page2.html/#webdesign-filter">Web ...

Loading React Components dynamically depending on user input

Looking to dynamically render different Components based on checkbox selections without unnecessary component imports. Using an Array with Component names (using numbers for example) to import each component based on the array values. Considered the foll ...

Retrieve data visualization tools from a separate function

Below is a Google dashboard featuring filtering, sorting, and paging functionality. I need to programmatically modify the sourceData and refresh the Google visualization from outside its containing function. The challenge is accessing the visualization fr ...

Looping through jQuery, I am adding divs, but frustratingly I can only insert text into the initial div created. Why

var numPills = 3 for(var i=0; i< numPills; i++){ //var currentPill = JUser.pill1.; $(".col-r-in").append( $('<div/>') .attr("id", "medsProgress") .addClass("roundedBar") ); $('#medsProgress').append( $('<div/>&apo ...

Issues arise when building with Angular using `ng build`, but everything runs smoothly when using `

My Angular 5 application uses angular-cli 1.6.8 { "name": "test", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "karma": "ng test", "test": "jest", "test:watch": "j ...

Exploring the inner workings of AngularJS SEO in HTML5 mode: Seeking a deeper understanding of this hidden functionality

There are plenty of resources available for incorporating SEO-friendly AngularJS applications, but despite going through them multiple times, I still have some confusion, especially regarding the difference between hashbang and HTML5 mode: In hashbang (# ...

Create a bar chart utilizing Highcharts drilldown feature by integrating data from two distinct JSON endpoints

I am currently working with two different JSON endpoints in order to create a Highcharts bar graph with drilldown functionality. The initial data for the graph is fetched dynamically from one endpoint and upon clicking on a bar, the graph will drill down t ...

Substitute the array positions with a new set of values

Consider the following scenario: User input sample: "1 + 3 - 2 * 4" string input = Console.ReadLine(); string[] getElement = input.Split(' '); // So if we have // getElement[0] = 1 // getElement[1] = + // getElement[2] = 3 // ... // Let' ...

Troublesome jQuery Issues Arising from Clicking on Nested Elements

Upon creating the following html using JavaScript, I am seeking to listen for clicks on both the channel_li and client_li. Generated HTML <li cid="4" class="channel_li" style="display: list-item;">Random<ul class=&qu ...

The function queryDatabases is not supported in the DocumentDB JavaScript API

Currently, I am developing a service for Azure Functions using JavaScript/Node.js. However, I encounter an error when trying to access the function DocumentClient.queryDatabases. Despite having the correct references installed in Visual Studio Code and bei ...