Prayers III
For this project, we were tasked to add dynamic features to our last project:
- Must render at least one index page via jQuery and an Active Model Serialization JSON Backend.
- Must render at least one show page via jQuery and an Active Model Serialization JSON Backend.
- Must use your Rails API and a form to create a resource and render the response without a page refresh.
- Must translate the JSON responses into Javascript Model Objects
Fortunately, the app was primed and ready to be refactored to implement most of these features. The functionality hinged on event listeners being added to certain elements of the DOM. Often times, this meant adding new button elements which, when clicked, would trigger a Javascript function.
In order to fetch the required data and dynamically load information from the apps database, various controllers were revised to respond with either an HTML or JSON formatted response. Most often, the html would be loaded as normal, but, if needed, a JSON response could be fetched. This was crucial in providing the Javascript models with the required information to fill in variable data of html templates being added to the DOM.
For the resource index requirement, the comments of each prayer were loaded and removed upon clicking a button on the prayer show page. Once the button was clicked, a GET request was sent and routed to the index route of the comments controller. From there, the controller responded with a JSON rendering containing an array of all the comments for that given prayer. Data from each element in the JSON array was extracted and used to create a Javascript comment object. Finally, the comment object implemented a method that formatted the object and its attributes to be added to the DOM for the user to view.
A similar approach was used to navigate dynamically through the BiblePrayers show pages. The main difference was having to navigate in a certain “direction” as opposed to simply toggling a resource visibility. The most challenging part of this process was debugging why the Javascript event only worked once time after a page refresh. After the new BiblePrayer show page was loaded dynamically, the next/previous buttons would not trigger any Javascript. Eventually, I realized that the click listener was not attached to the freshly rendered button elements. To solve this, after the new BiblePrayer show page was rendered and added to the DOM, a function was called that attached new click events to the newly rendered buttons.
These new features to the app, though subtle, improve the experience of the user which is certainly a step in the right direction. In the world of web development, the customer is the user, so user experience is extremely important. This project offered a glimpse of the power of Javascript, but it sets the foundation for many commonly implemented features of the modern web. Last but not least, it has set the stage for the final stage of the Flatiron Web Developer Program: React and Redux.