Rails and Javascript Portfolio Project

Posted by emhopkins on February 9, 2018

For this project I was excited to expand on my last rails project and add jQuery and AJAX. I started by looking for where it made sense to add ajax to my application and then eventually ended up picking areas that would work best to meet the project requirements. Here’s how I implemented each requirement into my existing project. To check out the code, see my repository here.

  1. Use jQuery for implementing new requirements - I was able to use quite a bit of jQuery in this application. I made use of jQuery’s $.get, $.ajax, $.each and others.
  2. Include a show resource rendered using jQuery and an Active Model Serialization JSON backend. - For this requirement I added a show resource for my Characteristic model. I then added a ‘Next’ button on the show page. The next button gets the id of the next characteristic and adds that object’s data to the show page, while also updating the data-id on the next button to allow for the button to continue to work going through all the characteristics.
  3. Include an index resource rendered using jQuery and an Active Model Serialization JSON backend. - For this requirement, I changed my buildings index to display a landlord’s buildings with an AJAX get request. This request loads the buildings as well as their apartments. It also creates links to each building’s edit form.
  4. Include at least one has_many relationship in information rendered via JSON and appended to the DOM. - I am rendering the apartments that belong to each building via JSON for the index of landlord’s buildings (buildings have many apartments). I am also including that relationship in my Building serializer. In doing so, an array of apartments get passed in the JSON response from my buildings get request. I am also defining specific attributes that should be passed in my response for each model.
  5. Use your Rails API and a form to create a resource and render the response without a page refresh. - For this requirement, I added a new index page to view all characteristics. Characteristics can be applied to apartments (and created) through the apartment create form, but I thought it would be nice to also give the landlord a place to add to the master list of characteristics. On the index page for characteristics I created a “Add new characteristic” button. When this button is clicked, I am doing a get request my new_characteristic url. Then, in my CharacteristicsController, I am defining the new action to respond_to format.js. By default, this looks for a file called new.js.erb in my /views/characteristics. In my new.js.erb file, I use ruby embeded javascript to render a partial with the new characteristic form. From there, I can fill out the new form and submit. On the submit event, I then prevent the default action (with event.preventDefault()) and instead post my new characteristic via ajax. On the submit, I also chose to validate for a non-empty string with js. After my object is created, I create a js model object with the response and append it to the form.
  6. Translate JSON responses into js model objects. - I created js model objects for Building, Apartment and Characteristic JSON responses.
  7. At least one of the js model objects must have at least one method added by your code to the prototype. - For all three of my js model objects, I created similar methods with the name, formatDisplay(). These methods all build the approprioate html for each object that I then use to append the respective forms.