jQuery Rails App
Rails, I’ve been working a lot on dealing with the back end through
ActiveRecord and using Rails templates with form helpers. However, modern web applications focus on spontaneous interaction, meaning single page apps with no page reloads. There are a variety of front end frameworks - like Angular, which I will be working with later - that many of the websites we use every day are built with. However, it’s possible to create interactive applications solely with jQuery - a
For this project, I wanted to create a simple note taking application kind of like Google Keep where the user can create and display notes without reloading the page. This creates a smoother, more natural user experience that I achieved with a
jQuery front end.
Rails Back End
Before focusing on user interaction, I organized the back end using
Rails controllers and models. I used Devise to set up a user model and authentication since notes wouldn’t be public - they needed to be limited to an individual user. After that, I used
rails generate resource to generate the files for notes and tags. The controllers are set up similarly to those in my last Rails project, with the exception of needing to account for the
AJAX requests that would be coming from the
jQuery front end.
Here is an example of an action in the notes controller handling both
respond_to, we’re able to handle requests for different formats. If we have a link that makes an
HTML request for a note, we render the note template. However, if we get a request for
JSON, we render the note in serialized
What is serialization and how does
Rails do it? There are a variety of ways, but I used ActiveModel Serializers which implicitly turns
You can take a look at my controllers here. Once the back end is set up, we can move on.
jQuery Front End
There’s a lot of code that went into seemingly basic functionality such as creating new notes, displaying notes based on a tag, and pagination without reloading. I’ll go over some of it briefly.
This portion of code attaches an event listener to the new tag form and processes the request to create a new form:
event.preventDefault() is necessary in order to prevent the default behavior of the form, which is to submit and reload the page. Anything with a
$ is shorthand for
jQuery, so it’s invoking a
jQuery object or function.
var name = $('#tag_name').val() gets the tag name value from the text input of the form and sets it to a variable. It validates it client side with a custom Validator class and if the data passes, it processes the request.
var values = $(this).serialize() serializes the data in the form via
jQuery and prepares it to be sent.
var posting = $.post('/tags', values) makes a
jQuery POST request to the tags controller with the data from the form that has been serialized. Once the posting is finished, we set a
.done callback to clear the form input field and then call the
Here, we make a
.getJSON request to ask for
JSON data from our tags controller. Since we set it up with a
respond_to earlier, the controller uses
ActiveModel Serializers to send the tag model as serialized
JSON data to
jQuery. Yes, this is a lot of serialization back and forth, but it’s necessary if we want two way
AJAX communication between our front and back ends.
We get our tags as
JSON data and iterate through it to generate the
HTML necessary to display each tag. From there, we call the
addTagListeners() function to add click events to each tag, so when we click on a tag it will then make another
AJAX request to get all the notes associated with the clicked tag.
There’s a lot more to it, but this gives a good sense of the basics of the project. You can take a look at the
You can see the source code for the whole project here on Github.