JS-Rails with jQuery and Ajax Requests
For me this project was a great way to experience the wonderful world of “refactoring”. The refactoring process for this project was really a three-stage process.
The first stage involved creating the homepage markup to allow for content to be inserted dynamically. For that, I created a new
home controller. I edited the
routes.rb file so that the root directory would be
home#index, and created the
index.html file inside
views/home. In there, I created a pretty basic markup structure with only a few
container, message, shows, and acts.
The second stage was where the real work occurred. It involved firstly, creating event listeners and handlers on the existing
div elements, and secondly, changing the get and put requests from the existing Rails style to jQuery. Getting the event listeners coded properly, as well as the get/put requests to do the right things was a little challenging, as it involved careful creating of the flow of object ids. For example, if I was to create a new Act, which was to be associated with a specific show, that put request would have to know the show id. Most of the time this could be coded within the
id element of the html markup.
I created two method prototypes within the Show class, the first one is
renderShowButton(), and the other was
viewShow(). These methods allowed me to render html elements without having to pass in any other data, which was great!
There are a few bugs and todos still remaining, which I will fix at a later date. First of all, Facebook Oauth seemed to stop working. I believe it might be because Facebook recently changed its privacy policies. I opted not to fix it for this lab, and instead spend the time on the actual requirements of the lab. Also, in the previous portfolio project, I used a gem called
combined-time-select, which didn’t seem to work very well with all the new jQuery additions. In fact, it consistently reported show times as five hours early than selected. In a future revision, I will remove this gem, and instead use the bootstrap dateTime picker. Also, my functions are primarily the older method, not the new ES6 style. And lastly, I’d like to include full CRUD functionality with the jQuery/Ajax style. For now, it’s only create and read.