The change() function isn't being called in the FooterControl of the nested Gridview

Question

The change() function isn't being called in the FooterControl of the nested Gridview

In my gridview, there is a nested structure with a footer row for inserting data. When the parent row expands, the footer controls are generated. There are two dropdowns where the second dropdown's options depend on the selection in the first dropdown. However, I'm facing an issue - when I change the value in the first dropdown, the change event is not triggered. The edit functions work fine within the endRequest function, but the insert controls do not.

Below is the markup:


<!-- ASP.NET UpdatePanel -->
...

This section of code-behind populates the dropdowns in the footer row:


// C# Code-Behind
...

And here's the associated JavaScript:


// JavaScript Function
...

UPDATE After making some changes based on Aleksey's suggestion, the change function now triggers successfully. However, the Service Name dropdown is still not updating accordingly. It seems that the selector #recdevgvDDListServiceNameInsert is not being recognized. The control has ClientIDMode set to Static.

The dropdowns are within an update panel and GridView. I've tried adding the update panel control as the parent in the selector, without success. I also use document.ready() and endRequest function for Edit mode.

I attempted using bindEvent function but encountered the same issue.

Here's the updated JavaScript:


// Updated JavaScript Function
...

UPDATE In Edit Mode, I made specific adjustments to display the "Choose service..." option in the dropdown list. Although the dropdown is now showing the correct text, it is still disabled. To enable the disabled chosen dropdown, I had to use $("select").prop("disabled", false), which allowed the rest of the function to work properly.

javascript asp.net gridview webforms

Answer 1

Answer №1

It seems like the updatePnlDeviceNestedGrid is present on the page during the initial page call, so let's enhance the readability of our JavaScript by adding ClientIDMode="Static" to your updatePanel.

 <asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional" ClientIDMode="Static">

To avoid reattaching the event after each partial postback, you should define your change event attachment function as follows. Make sure to place it within jQuery document ready to ensure that updatePnlDeviceNestedGrid is in the DOM.

$(function () {
    $('#updatePnlDeviceNestedGrid').on('change', '#recdevgvDDListDeviceNameInsert', function() {
        alert('Ready Fn - Insert: Device name DDL change fn');
        // continue with your code .....
    });
})

If you want to avoid making additional changes, you can also attach it directly to the document.

 $(document).on('change', '#recdevgvDDListDeviceNameInsert'

For reference, you can check out the jQuery docs at http://api.jquery.com/on/

"Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready."

UPDATE

Alternatively, you can rebind it after each partial postback, as shown in this answer: jQuery $(document).ready and UpdatePanels?

For example, you can create a function to bind events:

function bindEvents(){
   $("#recdevgvDDListDeviceNameInsert").change(function () {
       // your code......
   }

   // add some other bindings here
}

// execute on initial page load
$(function () {
   bindEvents();
})

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

prm.add_endRequest(function() {
   // re-bind your jQuery events here after updatepanel update
    bindEvents(); 
});

Answer 2

It seems like the updatePnlDeviceNestedGrid is present on the page during the initial page call, so let's enhance the readability of our JavaScript by adding ClientIDMode="Static" to your updatePanel.

 <asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional" ClientIDMode="Static">

To avoid reattaching the event after each partial postback, you should define your change event attachment function as follows. Make sure to place it within jQuery document ready to ensure that updatePnlDeviceNestedGrid is in the DOM.

$(function () {
    $('#updatePnlDeviceNestedGrid').on('change', '#recdevgvDDListDeviceNameInsert', function() {
        alert('Ready Fn - Insert: Device name DDL change fn');
        // continue with your code .....
    });
})

If you want to avoid making additional changes, you can also attach it directly to the document.

 $(document).on('change', '#recdevgvDDListDeviceNameInsert'

For reference, you can check out the jQuery docs at http://api.jquery.com/on/

"Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready."

UPDATE

Alternatively, you can rebind it after each partial postback, as shown in this answer: jQuery $(document).ready and UpdatePanels?

For example, you can create a function to bind events:

function bindEvents(){
   $("#recdevgvDDListDeviceNameInsert").change(function () {
       // your code......
   }

   // add some other bindings here
}

// execute on initial page load
$(function () {
   bindEvents();
})

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

prm.add_endRequest(function() {
   // re-bind your jQuery events here after updatepanel update
    bindEvents(); 
});

The change() function isn't being called in the FooterControl of the nested Gridview

Answer №1

Similar questions

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

What is the best way to reposition the origin of the canvas to the center?

Babel Compile disrupts the flow of commands

The section element cannot be used as a <Route> component. Every child component of <Routes> must be a <Route> component

What are the limitations of the unhandledrejection event in React when it comes to capturing certain Errors?

Transform a text string into JSON format using Javascript

Understanding the visibility scope in JavaScript's object-oriented programming

Interactive input field designed for modifying, adding, and removing data in MySQL

Attempting to establish a login system using MongoDB

show the stored value inside the useRef variable

Generating views for individual models in a backbone collection

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Tips for crafting interactive Dropdown menus

Clicking on the (x) button element will eliminate the DOM node from a list

What are the steps to resolving an Unhandled promise rejection error in a Node.js application?

Using Javascript to select a radio button in a form depending on the value entered in a text box

Having trouble with Grunt and Autoprefixer integration not functioning properly

The process of eliminating line breaks in javascript is not functioning as expected

I attempted to verify the login through postman, but encountered an error in the process

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query