Handle button Ajax response

Keyboard Shortcuts

Continue building a button that uses Ajax to asynchronously favorite a blog post by writing the JavaScript code for processing the Ajax response. It will add a visual indication that the AJAX request succeeded by displaying a red heart in the corner of the blog post.

- [Instructor] In the previous movie, we were able…to capture and store the correct ID in the session.…But at the moment, the user doesn't have any indication…whether the Ajax request succeeded or not.…In this movie, we're going to make that clear.…One of the best ways to make it clear…that an item has changed…is to mark it with a different class in CSS.…And it's best if we can do that at the very top level,…the parent of the item, in this case, the blog post class.…So what we want to do is add a class to this blog post…to know that it's a favorite,…so it makes sense that the class would be called favorite.…

We want to do that if we get back a true result.…So if the result comes back…and it's equal to the string true,…not the actual true or false, but the string true,…then we want to take that parent…that we've been working with,…remember that's the parent element of this Favorite button,…we want to take that parent and we want to say that…its classList ought to add,…and then let's put in favorite.…That's going to add favorite to its class list,…

Resume Transcript Auto-Scroll

Author

Released

11/7/2016

Add dynamic, asynchronously loading content to websites to make them more modern, professional, and user friendly with Ajax and PHP. Learn how to use Ajax to send and receive data in the background and how to use PHP to assemble and return text, HTML, or JSON responses. Kevin Skoglund walks viewers through sample projects for the most common Ajax use cases: buttons to allow users to mark or favorite items, forms that validate and submit data in the background, infinite scrolling of paginated content, and autosuggestions beneath a text field.