The next part of the second task requires you to use another AJAX request to load the details for whichever item is selected in the carousel.
(flute music)…- The work that we're going to do on the details pane is…a little more complex than that one, but less complex…than the header, okay?…Check the read me, what does it say to do?…The read me says, you want to set up an event handler…that listens for clicks on items in the carousel,…and whenever that carousel item is clicked,…you pull the ID from its rel attribute,…and you do another Ajax request to load it in,…put its contents into the content div.…
Basically, it's going to be a lot like what we did…in the header file.…But, maybe a little bit simpler.…So essentially, what I'm saying here is,…we want to attach a click handler so that when I click on…one of these icons,…it, that click handler fires,…it lets us know which icon we clicked on,…when we go to the HTML, you'll notice that…each item in the carousel has its own number,…it has an ID, basically, so we want to grab that number,…and then that is the file that we want to Ajax in.…
So if I click on the one that has dash zero,…we want to load a file called zero.html,…
Note: This course was created on 03/29/2016 by Frontend Masters. We are pleased to host this content in our library.
- Carousels, panes, and modules
- Middle-end architecture
- Secure phrase generator
- Routing functions
- Calling the API
- Rendering on the page
- Shared data validation
Skill Level Intermediate
2. Organizing Code
5. Adding a Shared Module
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.