My Rails App, Travsto, now with a jQuery Front End

A bit of JSON

A Sprinkle of JavaScript

For part two of my Rails project with Learn Verified, I was tasked with adding some jQuery to my previous project. You can read about the making of Travsto on this blog post and check out the code I added on GitHub. This was a simpler task than building an entire project but it was not without its challenges.

The requirements were about including aspects of what I had learned in the JavaScript section of the curriculum. Things like rendering a show and index page via jQuery and JSON, create and edit a resource and render the response without a page refresh, a has-many relationship in the JSON, etc. You can see the JSON above that made all the magic happen.

Time to Make Some JSON!

One of the first things I did was install the Active Model Serializers gem. This allowed me to create the JSON you see above so I could use it in my views. It was a little tricky to set up to have all the proper information I needed for my travel stories index and show pages.

My travel stories (which is called trips in my code) have many businesses, many comments, and one user. I created serializers for each of those to connect with my travel stories to pull just the information I was going to need.

class TripSerializer < ActiveModel::Serializer
  attributes :id, :title, :description, :slug
  has_many :businesses, serializer: BusinessTripSerializer
  has_one :user, serializer: UserTripSerializer
  has_many :comments, serializer: CommentTripSerializer
end

Now with all of this information, I could use it to render the information for my index and show pages.

Let’s Get Into the JavaScript

I had only a few bits of JavaScript I needed to meet the requirements. I have a JavaScript file to render the show page, one for the index page, one to handle creating comments, and one to handle editing comments. I could (and probably should) refactor the index and show files into one file, but since those files only get loaded on those pages and no where else, I think it is probably fine.

To get my JavaScript files to only load on the pages I wanted them to load on, I first changed my application.js file. Normally, it uses //= require_tree . to load all of the JavaScript files. However, if you use //= require_directory . it will ignore any files in a folder. I then created folders to hold my custom files allowing me to drop

<% content_for :head do %>
  <%= javascript_include_tag "trip_comments/trip_comments" %>
<% end %>

into my view which would need that particular file. This meant my travel stories index page would load a separate JavaScript file than my travel stories show page.

Not All JavaScript Went Smoothly

I was going to do a link to go to the next travel story but when your URL uses slugs instead of IDs that is kind of hard. Instead, to meet the requirements, I added in the ability to create and edit comments without a page refresh. This was something I wanted to do anyway so it made sense. The adding comments part was easy, but the editing turned out to be more difficult.

There were many simple things that added up to a big problem. Initially, my comment form started out like

<%= form_for Comment.new do |f| %>

It seemed like a good idea at the time because it was on my travel story page and not a comment page so there was not an @comment loaded. Once I came to my senses, I added

@comment = Comment.new

to my Trips controller’s Show action, and changed my form to

<%= form_for @comment do |f| %>

This was a problem when I was using the same form for creating and editing comments but was less of one as I progressed with things.

Another issue I was having was getting the edit comment form to render in place. At first I managed to get the edit comment button to load the create comment form. Then I managed to get the entire edit comment page to load including the navbar and footer (which was really awkward). Eventually, I got things loading putting this in my Comments controller’s Edit action

def edit
  render :edit, layout: false
end

This kept it from loading the rest of the layout and gave me only my form. Then it was only a matter of using JavaScript similar to what I used for my create comment to take the edited comment values and edit the post information.

All in all 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. At some point you just have to ship it!

Ship it!

Currently a student at Learn Verified studying to be a web developer. Follow me on Twitter @thebrianemory. Follow me here, click the green heart to show some love, leave a comment, and get in touch!