web developer | musician | venue booker

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 div elements, 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.

The third stage involved creating Javascript class methods. To be honest, it probably would have been easier to create these class methods first, as it is easier to visualize the passing of class/object parameters then it is via html id elements (or, at least it is now, having spent so much time with Rails over the past few months).

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.