My Rails app, Food Travels, now with a jQuery Front End

For the fourth assessment project at the Flatiron Learn Verified Online Program, I was required to build a jQuery front end to my previous project. You can read about the making of Food Travels on this blog post and check out the code I added on Github. Although this was a simpler task than building an entire project, it did have some challenges. This makes it even a better learning experience.

Some of the requirements involved rendering a show and index page using jQuery and JSON, creating a resource and rendering the response without a page refresh, a has-many relationship in the JSON, etc..

Below is a walkthrough of my Rails app with the jQuery Front End:

A Walkthrough of Food Travels With a jQuery Front End

Here are the Specific Project Requirements and my plan to how to implement them in Food Travels:

  1. Must render one index page via jQuery and an Active Model Serialization JSON Backend.

I had multiple models to choose from (Comments, Foods, Users, Destinations), but since food travel stories (which is destinations in my code) was the crux of my app, destinations seemed like the obvious choice to work on. I wanted to be able to reveal a little bit more information about each food travel story on the destination index page.

  • Destinations Index page has a “Read More” link that expands a section under each destination to the entire food travel story without redirecting the user to the individual food travel story.

2. Must render one show page via jQuery and an Active Model Serialization JSON Backend.

Within the destinations show page, I wanted to be able to navigate between all food travel stories with a next button and previous button.

  • Destinations show page has a “Next” button and “Previous” button that allows the user to navigate through all the food travel stories without redirecting the user to another individual food travel story.

3. The Rails API must reveal at least one has-many relationship in the JSON that is then rendered to the page.

  • In the index page, a User has many Destinations.
  • In the show page, a Destinations has many Comments.

4. Must use your Rails API to create a resource and render the response without a page refresh.

This meant that for example, if a user adds a comment to a post, the comment would be serialized, submitted via an AJAX POST request, with the response being the new object in JSON and then appending that new comment to the DOM. In other words, I was supposed to use an AJAX post to create a new object. I chose to create a new comment.

  • Within the Destinations show page, you can create a new comment and the new comment will appear on the same page by exposing the new data in a hidden div, with no refresh.

5. Must translate the JSON responses into Javascript Model Objects. The Model Objects must have at least one method on the prototype. Formatters work really well for this.

This requirement meant that the JSON responses must be turned into JavaScript objects first before the updated data was rendered to the page. So for example I click on a specific Food Travel Story (in JSON), and then take the info I needed to create a JavaScript Comment object. Then I’d take that object and use it in the rendering of the information. Also, I’d have to add a method to the prototype.

  • Comment has a renderDisplay() function.

More Information About a Feature that I Built In Food Travels using JSON and jQuery:

One of the first things I did was install the Active Model Serializers gem. This allowed me to create the JSON, so I could use it in my destinations index and show views.

Destinations has many comments and belongs to a user. I created serializers for each of those to connect with my destinations to pull just the information I was going to need. With all of this information, I could use it to render the information for my index and show pages.

The next thing that I did was to add some front-end functionality to the destinations index page. The first version had just a list of food travel stories, with the entire content. I thought it would add to the user experience if they were able to see a portion of a food travel story page load instead of the reading the entire content. Then they could click on a line to read the rest of that food travel story on the same page. This is the code that I used to make this happen:

This code uses the truncate helper method so that way only a portion of the food travel story is first visible. When a user clicks the Read More link, they see the full text.

Process I went through with creating a new comment:

When I was working on using my Rails API and a form to create a comment and render the response without a page refresh, each of my comments were missing a user id in the console. So in order to resolve that issue I had to create a customized comment_list serializer in order for each comment to have their own user_id, as shown below:

One of the lessons that I learned while building this application is that in order for a new comment to be created it was important to create a function to load all the entire destination within the show page and a submitted_comments div in this function so that way the response can be rendered with out a refresh.

Last but not least, via Object Orient JavaScript I created a constructor function to build a prototype for what an object (comment) would look like, including all the properties (id, content, and user). Also added a renderDisplay method to this object as well.

Overall I am happy with how things turned out. There are still some features I want to include but that will have to wait until after graduation, such as add option for users to edit and delete comments. I do look forward to learning Angular and continuing my endeavor of becoming a full stack web developer.

Thank you for reading this blog post!

Show your support

Clapping shows how much you appreciated Karuna Sehgal’s story.