Posted over 3 years ago. Visible to the public.

Unobtrusive JavaScript and AJAX

Learn

  • Learn about "AJAX". How did AJAX change classical web development practices?
  • Learn about "Unobtrusive JavaScript" and "Progressive Enhancement". What are some advantages of these techniques? How does it contrast with more modern techniques like AngularJS or React?
  • What is the $.unobtrusive helper you find in many of our projects? How does it differ from jQuery's $(function() { ... })?

Exercises

Spoilers

  • Add a "plot summary" to your movies.
  • Plot summaries can be spoilers. Write some JavaScript for your movie detail screen that hides the summary and shows a "Show spoilers" link. When clicked the full content is shown.
  • Implement this using unobtrusive JavaScript. In your HTML, only add a class spoiler to the div containing the plot summary, the rest should be done all on the client.

Find-as-you-type

Implement a find-as-you-type search box over the movies list in MovieDB. The list of movies should update while the user is typing in the search query.

Dual-pane layout

Change the MovieDB layout so the screen is divided into two vertical panes. The left pane shows the list of movies, the right pane the movie details.

Add some Javascript so that when I click on a movie, the details are fetched via AJAX and displayed in the right pane (without a full page load).

  • Does your "Show spoilers" JavaScript still work? If not, fix it using $.unobtrusive.
  • Can you make the two-pane-layout work when Javascript is disabled?
  • Observe how the address bar no longer changes when viewing a movie. How can we fix this?
  • Can you change your Javascript so it doesn't know about the movie list or the pane layout? Turn the Javascript into a generic solution that would work in any project. Apply it to the "New movie" button, which should now load the movie form in the right pane (without a full page load). It's OK if the form submission still replaces the entire screen.

Common $.unobtrusive error

What's the difference between

Copy
$.unobtrusive(function() { $('.spoilers').each(hideSpoilers); });

and

Copy
$.unobtrusive(function() { $(this).find('.spoilers').each(hideSpoilers); });

Which one is correct? Why?

Owner of this card:

Avatar
Henning Koch
Last edit:
almost 2 years ago
by Tobias Kraze
Posted by Henning Koch to makandra Curriculum
This website uses cookies to improve usability and analyze traffic.
Accept or learn more