Скачать или смотреть Using AJAX Calls with Multiple Buttons

Learn how to effectively use multiple buttons for AJAX calls in your web applications with this detailed guide and example code.
---
This video is based on the question https://stackoverflow.com/q/74962383/ asked by the user '3LAA HANI' ( https://stackoverflow.com/u/20783383/ ) and on the answer https://stackoverflow.com/a/74962498/ provided by the user 'Zack Newsham' ( https://stackoverflow.com/u/863192/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I use multiple buttons for AJAX Calls?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use Multiple Buttons for AJAX Calls

In web development, using AJAX (Asynchronous JavaScript and XML) enables you to send and retrieve data asynchronously without refreshing a web page. This capability is paramount for creating a smooth user experience. However, one common issue that developers encounter is ensuring that multiple buttons trigger AJAX calls correctly. Here, we will dive into a practical solution to this problem.

The Challenge

The problem arises when you create event handlers for buttons within dynamically populated HTML elements (like rows in a table). When the buttons for "update" and "delete" are added to the table, they don’t function as intended because the event handlers are only set up for elements that exist at the moment the handler is created. The solution lies in event delegation.

Understanding Event Delegation

Event delegation is a pattern that allows you to manage events for multiple child elements through a common parent element. Instead of binding event handlers directly to each button, we will bind the handler to a parent element and respond to click events that bubble up from child elements.

Step-by-Step Solution

Update Your jQuery Code: Modify your jQuery code to implement event delegation for the "update" and "delete" buttons. Here’s how you can do it:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Building the Table: The buildTable function populates the table with data from an AJAX response, including buttons for "update" and "delete".

Event Binding: Using $("-myTable").on("click", ".delete", function() {...}), we bind the click event to the parent table (-myTable). The event is then handled for any child item (the buttons) with the class .delete or .update—even though they don’t exist when the handler is created.

AJAX Calls: Inside each event handler, AJAX requests are made to respective endpoints to perform the desired action (update or delete) on the courses.

Conclusion

By implementing event delegation, you can ensure that your buttons—no matter how they are added to the DOM—will trigger the correct AJAX calls. This solution improves the reliability and maintainability of your JavaScript code and enhances user interaction in your web applications.

Now you are better equipped to handle AJAX calls effectively with multiple buttons in your project!