Confetti Cuisine raves about the user interaction with the application. To encourage more users to enroll in their courses, however, they’d like me to add more data on individual pages. More specifically, they want me to include a modal on every page that lists the offered courses and a link to enroll in each one.
To accomplish this task, I’m going to make requests to my application server by using Ajax on the client side. By making an asynchronous call to my server behind the scenes, I won’t need to load the course data until the user clicks a button to enroll. This change to use Ajax should help with the initial page-load time and ensure that course data is up to date when the user views it.
First, I’m going to need to modify my application layout view to include a partial containing the Embedded JavaScript (EJS) for my modal. Next, I’m going to create the client-side JavaScript code to request for course data. To get this data to appear, I need to create an API endpoint to respond with course data as JSON. When I have that endpoint working, I’ll add an action to handle enrolling users in courses and respond with JSON upon completion. This endpoint will allow users to enroll in classes from any page without needing to leave or refresh the page they’re on.
Before I begin, I’m going to restructure my routes to pave the way for my new API endpoints.
29.1. Restructuring routes