Скачать или смотреть How to Easily Change Icon Classes with AJAX in JavaScript

Discover how to modify HTML icon classes dynamically using AJAX calls in JavaScript, enhancing user experience effortlessly.
---
This video is based on the question https://stackoverflow.com/q/62726762/ asked by the user 'Mir Stephen' ( https://stackoverflow.com/u/9441080/ ) and on the answer https://stackoverflow.com/a/62726852/ provided by the user 'Tartempion34' ( https://stackoverflow.com/u/3478288/ ) 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: Ajax call to change icons

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.
---
Changing Icons with AJAX in JavaScript

Icons play a significant role in enhancing the user interface of a web application. A common requirement for modern web applications is to change the appearance of an icon in response to user actions, such as a button click. In this guide, we will explore how to change the icon class dynamically after making an AJAX call.

The Scenario

Suppose you've created a button that allows users to add an item to their wishlist, and by default, it shows a heart icon as empty (represented by the class far fa-heart). After the user clicks on this button, not only do you want to make an AJAX call to save the wishlist item, but you also want to toggle the heart icon to a filled state (represented by the class fas fa-heart).

Your Original Code

Here's how you started with the button:

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

And here’s the AJAX call you wrote:

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

The Problem

After receiving a successful response from your AJAX call, you wanted to change the class of the <i> tag from far fa-heart to fas fa-heart. However, attempts using this and e.target in the success function didn’t work.

The Solution

We can resolve this issue by properly selecting the <i> element inside the clicked button and modifying its class after the AJAX request is successful. Here’s how you can achieve that:

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

Step-by-step Breakdown:

Button Click Event: Listen for the click event on the button with the ID # wishbtn.

AJAX Call: Make an AJAX GET request to the specified URL with the necessary data.

Success Callback: Upon successful completion of the AJAX request:

Use el.find('i') to select the <i> tag inside the button.

Use .removeClass('far') to remove the 'far' class.

Use .addClass('fas') to add the 'fas' class, effectively changing the icon from an outline heart to a filled heart.

Conclusion

Changing the class of an icon using AJAX in JavaScript is straightforward once you correctly understand how to select elements in the DOM. By following the steps outlined above, you'll provide instant visual feedback to users, improving their experience on your web application.

Now go ahead, implement this in your project, and see how quickly your icons can change with just a simple click!